[英]How to open a new page on button click in vue 3?
I have this application with a button and I want to change to a different, Vue file.我有一个带有按钮的应用程序,我想更改为不同的 Vue 文件。 My first Vue file is called app.vue.
我的第一个 Vue 文件名为 app.vue。
<template>
<div id="app">
<button id="gettingStarted">Getting started</button>
</div>
</template>
<script>
export default {
name: 'App',
components: {
}
}
</script>
<style>
#app {
font-family: Avenir, Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
}
#gettingStarted {
font-family: Avenir, Helvetica, Arial, sans-serif;
background:cornflowerblue;
border-radius: 0.5rem;
height: 2.5rem;
width: 6%;
}
</style>
and then I have another file called Gallery.vue然后我有另一个名为 Gallery.vue 的文件
<template>
<div id="app">
<h4>25%</h4>
</div>
</div>
</template>
<script>
export default {
name: 'App',
components: {
}
}
</script>
<style>
#app {
font-family: Avenir, Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
}
</style>
So on the button click in-app.vue I want to go to gallery.vue.所以在按钮上点击 in-app.vue 我想去 gallery.vue。 I am currently using Vue3 for this project.
我目前在这个项目中使用 Vue3。
You can always use Vue Router.你总是可以使用 Vue Router。
This tutorial will explain better than me :本教程将比我解释得更好:
https://appdividend.com/2018/12/28/vue-router-tutorial-with-example-how-to-use-routing-in-vuejs https://appdividend.com/2018/12/28/vue-router-tutorial-with-example-how-to-use-routing-in-vuejs
essentially what you want to do is render different components基本上你想要做的是渲染不同的组件
<Component1 v-if="useComponent1" />
<Component2 v-if="useComponent2" />
but that gets a bit unwieldly quite quickly ( though might be useful for something pretty simple. So quite often what people do is "client side" routing.但这很快就会变得有点笨拙(尽管对于非常简单的事情可能很有用。所以人们经常做的是“客户端”路由。
In Vue3, you can use the simple router in the docs https://v3.vuejs.org/guide/routing.html#simple-routing-from-scratch在 Vue3 中,您可以使用文档https://v3.vuejs.org/guide/routing.html#simple-routing-from-scratch 中的简单路由器
or use something like VueRouter (which is pretty common)或者使用类似 VueRouter 的东西(这很常见)
<button id="gettingStarted" @click="click">Getting started</button>
...
import { useRouter } from 'vue-router'
export default {
setup() {
const router = useRouter()
const click = () => {
router.push({
path: 'target path'
})
}
return {
click
}
}
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.