VUE #/ 也稱(chēng)作“vue router”,是前端框架 Vue.js 中的一個(gè)插件,也是實(shí)現(xiàn)單頁(yè)面應(yīng)用的一個(gè)重要組成部分。
使用 VUE #/ 可以幫助我們實(shí)現(xiàn)頁(yè)面跳轉(zhuǎn)時(shí)的路由控制,使用戶(hù)在使用單頁(yè)面應(yīng)用時(shí)感受到頁(yè)面的變化,同時(shí)也可以在 URL 中展示當(dāng)前頁(yè)面的狀態(tài)。
// 安裝vue-router npm install vue-router --save // 在main.js中引入vue-router并使用 import Vue from 'vue' import VueRouter from 'vue-router' Vue.use(VueRouter) // 引入組件 import Home from './components/Home.vue' import About from './components/About.vue' // 定義路由 const routes = [ { path: '/', component: Home }, { path: '/about', component: About } ] // 創(chuàng)建路由實(shí)例 const router = new VueRouter({ routes }) // 將路由實(shí)例掛載到Vue實(shí)例上 new Vue({ router, render: h =>h(App) }).$mount('#app')
在上面的代碼中,我們先引入 vue-router,并在 Vue 實(shí)例中創(chuàng)建一個(gè)路由實(shí)例 router。然后我們定義了兩個(gè)路由,一個(gè)指向路徑為 / 的組件 Home,另一個(gè)指向路徑為 /about 的組件 About。
最后,我們將路由實(shí)例掛載到 Vue 實(shí)例上,并將路由渲染到 App 組件的根元素 #app 上,這樣路由就可以被 Vue 管理并控制頁(yè)面跳轉(zhuǎn)了。