[英]How to open a new page on button click in vue 3?
我有一個帶有按鈕的應用程序,我想更改為不同的 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>
然后我有另一個名為 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>
所以在按鈕上點擊 in-app.vue 我想去 gallery.vue。 我目前在這個項目中使用 Vue3。
你總是可以使用 Vue Router。
本教程將比我解釋得更好:
https://appdividend.com/2018/12/28/vue-router-tutorial-with-example-how-to-use-routing-in-vuejs
基本上你想要做的是渲染不同的組件
<Component1 v-if="useComponent1" />
<Component2 v-if="useComponent2" />
但這很快就會變得有點笨拙(盡管對於非常簡單的事情可能很有用。所以人們經常做的是“客戶端”路由。
在 Vue3 中,您可以使用文檔https://v3.vuejs.org/guide/routing.html#simple-routing-from-scratch 中的簡單路由器
或者使用類似 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.