vue點(diǎn)擊按鈕實(shí)現(xiàn)頁(yè)面跳轉(zhuǎn)
1.安裝vue-router：
npm install vue-router
2.在main.js中引入并使用vue-router：
import Vue from 'vue'
import App from './App.vue'
import router from './router'
Vue.config.productionTip = false
new Vue({
router,
render: h => h(App),
}).$mount('#app')
3.在src目錄下創(chuàng)建router.js文件，并配置路由：
import Vue from 'vue'
import VueRouter from 'vue-router'
import Home from './views/Home.vue'
import About from './views/About.vue'
Vue.use(VueRouter)
const routes = [
{
path: '/',
name: 'Home',
component: Home
},
{
path: '/about',
name: 'About',
component: About
}
]
const router = new VueRouter({
mode: 'history',
base: process.env.BASE_URL,
routes
})
export default router
4.在App.vue中使用router-link組件實(shí)現(xiàn)頁(yè)面跳轉(zhuǎn)：
<template>
<div id="app">
<nav>
<router-link to="/">Home</router-link> |
<router-link to="/about">About</router-link>
</nav>
<router-view/>
</div>
</template>
在上面的代碼中，我們使用了router-link組件來實(shí)現(xiàn)頁(yè)面跳轉(zhuǎn)，to屬性定義了跳轉(zhuǎn)的路徑，
點(diǎn)擊后會(huì)自動(dòng)引導(dǎo)vue-router進(jìn)行路由跳轉(zhuǎn)。同時(shí)，在App.vue中使用了router-view組件來顯示當(dāng)前路由對(duì)應(yīng)的組件內(nèi)容。
5.在views目錄下創(chuàng)建Home.vue和About.vue組件，用于展示不同的頁(yè)面內(nèi)容。
<template>
<div>
<h1>Home Page</h1>
</div>
</template>
至此，我們就完成了一個(gè)簡(jiǎn)單的vue-router頁(yè)面跳轉(zhuǎn)的示例。需要注意的是，這里使用了history模式進(jìn)行路由跳轉(zhuǎn)，
這意味著我們需要配置服務(wù)器，以便在瀏覽器中刷新頁(yè)面時(shí)不會(huì)出現(xiàn)404錯(cuò)誤。如果不需要使用history模式，
可以將router.js中的mode屬性改為hash模式。
文章來源地址http://www.zghlxwxcb.cn/news/detail-530190.html
文章來源：http://www.zghlxwxcb.cn/news/detail-530190.html
到了這里，關(guān)于vue點(diǎn)擊按鈕實(shí)現(xiàn)頁(yè)面跳轉(zhuǎn)的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
