vue-router是Vue.js官方提供的一套專用的路由工具庫
安裝命令如下
npm i vue-router -D
vue-router 實例是一個Vue插件，我們需要在Vue全局引用中通過Vue.use() 將它接入到Vue實例中。
在我們的工程中，,main.js是默認的程序入口文件，所有的全局配置都會在這個文件中進行。
我們在main.js中加入如下引用
import VueRouter from 'vue-router'Vue.use(VueRouter)
這樣就完成了 vue-router最基本的安裝工作了。
接下來我們要實現的功能描述如下
在首頁上有兩個鏈接分別是：購物車和個人中心
點擊不同的鏈接顯示不同的內容
首先我們在 src 目錄下建立兩個組件文件： Cart.vue Me.vue
新建的兩個組件文件的內容暫時都是同樣的結構
<template> <!-- 這個div里面的內容可設置不同以區分 --> <div>購物車</div></template><script>export default {}</script><style lang="scss"></style>接下來就是在main.js文件中定義路由與這些組件之間的匹配規則了。
VueRouter的定義非常簡單：創建一個VueRouter實例，將路由path指定到一個組件類型上
如下代碼所示（main.js）
import Vue from 'vue'import App from './App.vue'import VueRouter from 'vue-router'//引入創建的兩個組件import Cart from './Cart.vue'import Me from './Me.vue'//使用路由實例插件Vue.use(VueRouter)const router = new VueRouter({ mode:'history', base: '__dirname', routes:[ //將頁面組件與path指令的路由關聯 {path:'/cart',component:Cart}, {path:'/me',component:Me} ]})new Vue({ el: '#app', //將路由實例添加到Vue實例中去 router, render: h => h(App)})我們可以將上面的路由有關的代碼提取出來放在另外的一個routes.js文件中去，防止main.js文件的內容越來越長。
新建一個 config 文件夾，然后將routes.js文件加入進去。
則routes.js代碼如下
import Vue from 'vue'import VueRouter from 'vue-router'//引入創建的兩個組件import Cart from '../Cart.vue'import Me from '../Me.vue'//使用路由實例插件Vue.use(VueRouter)const router = new VueRouter({ mode:'history', base: '__dirname', routes:[ //將頁面組件與path指令的路由關聯 {path:'/cart',component:Cart}, {path:'/me',component:Me} ]})export default router;然后main.js文件代碼就減小到如下：
import Vue from 'vue'import App from './App.vue'import router from './config/routes'new Vue({ el: '#app', //將路由實例添加到Vue實例中去 router, render: h => h(App)})vue-router 提供了兩個指令標簽
<router-view> : 渲染路徑匹配到的視圖組件
<router-link> : 支持用戶在具有路由功能的應用中導航
在有了上面的兩個指令標簽，我們就可以在程序入口 App.vue編寫相應的代碼了：
<template> <div id="app"> <div class="tabs"> <ul> <li> <router-link to ="/cart"> <div>購物車</div> </router-link> </li> <li> <router-link to ="/me"> <div>個人中心</div> </router-link> </li> </ul> </div> <div class="content"> <!-- 使用 router-view 渲染視圖 --> <router-view></router-view> </div> </div></template><script>export default { name: "app"};</script><style lang="scss"></style>到此上面的代碼已經實現了預期的功能了。
然后我們看to ="/cart"這個里面的路徑其實已經在{path:'/cart',component:Cart}定義過了，如果需要修改，就得需要這兩個地方同時修改（如果有其他地方用的就改動的更多）
那么直接將{path:'/cart',component:Cart}中的路徑取出來豈不是很好。
這個時候我們的 vue-router提供了一種隱式的路由引用方式，稱之為 ―― 命名路由
簡單來說就是通過路由的名稱引用來取代Url
于是VueRouter的配置代碼改為如下：
const router = new VueRouter({ mode:'history', base: '__dirname', routes:[ //將頁面組件與path指令的路由關聯 {name:'cart',path:'/cart',component:Cart}, {name:'me',path:'/me',component:Me} ]})這樣我們在 <router-link >的to屬性使用v-bind綁定到Vue實例中，然后通過名稱直接得到Url了
于是App.vue中的鏈接部分的代碼改為如下
<li> <router-link :to ="{name:'cart'}"> <div>購物車</div> </router-link> </li> <li> <router-link :to ="{name:'me'}"> <div>個人中心</div> </router-link> </li>至此，使用vue-router完成了簡單導航功能
說明
<router-link>默認渲染成帶有正確鏈接的<a>標簽 ，也可以通過配置 tag 屬性生成別的標簽
比如
<li> <router-link :to ="{name:'cart'}" tag="span"> <div>購物車</div> </router-link> </li>總結
以上所述是小編給大家介紹的使用vue-router完成簡單導航功能，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對武林網網站的支持！
新聞熱點
疑難解答
