這篇文章給大家分享的是有關(guān)怎么使用vue-router完成簡單導(dǎo)航功能的內(nèi)容。小編覺得挺實用的，因此分享給大家做個參考，一起跟隨小編過來看看吧。

創(chuàng)新互聯(lián)堅持“要么做到，要么別承諾”的工作理念，服務(wù)領(lǐng)域包括：網(wǎng)站建設(shè)、做網(wǎng)站、企業(yè)官網(wǎng)、英文網(wǎng)站、手機端網(wǎng)站、網(wǎng)站推廣等服務(wù)，滿足客戶于互聯(lián)網(wǎng)時代的懷寧網(wǎng)站設(shè)計、移動媒體設(shè)計的需求，幫助企業(yè)找到有效的互聯(lián)網(wǎng)解決方案。努力成為您成熟可靠的網(wǎng)絡(luò)建設(shè)合作伙伴！

Vue的優(yōu)點

Vue具體輕量級框架、簡單易學(xué)、雙向數(shù)據(jù)綁定、組件化、數(shù)據(jù)和結(jié)構(gòu)的分離、虛擬DOM、運行速度快等優(yōu)勢，Vue中頁面使用的是局部刷新，不用每次跳轉(zhuǎn)頁面都要請求所有數(shù)據(jù)和dom，可以大大提升訪問速度和用戶體驗。

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最基本的安裝工作了。

接下來我們要實現(xiàn)的功能描述如下

在首頁上有兩個鏈接分別是：購物車和個人中心

 點擊不同的鏈接顯示不同的內(nèi)容

首先我們在 src 目錄下建立兩個組件文件： Cart.vue Me.vue

新建的兩個組件文件的內(nèi)容暫時都是同樣的結(jié)構(gòu)

接下來就是在main.js文件中定義路由與這些組件之間的匹配規(guī)則了。

VueRouter的定義非常簡單：創(chuàng)建一個VueRouter實例，將路由path指定到一個組件類型上

如下代碼所示（main.js）

import Vue from 'vue'
import App from './App.vue'
import VueRouter from 'vue-router'
//引入創(chuàng)建的兩個組件
import Cart from './Cart.vue'
import Me from './Me.vue'
//使用路由實例插件
Vue.use(VueRouter)
const router = new VueRouter({
 mode:'history',
 base: '__dirname',
 routes:[
 //將頁面組件與path指令的路由關(guān)聯(lián)
 {path:'/cart',component:Cart},
 {path:'/me',component:Me}
 ]
})
new Vue({
 el: '#app',
 //將路由實例添加到Vue實例中去
 router,
 render: h => h(App)
})

我們可以將上面的路由有關(guān)的代碼提取出來放在另外的一個routes.js文件中去，防止main.js文件的內(nèi)容越來越長。

新建一個 config 文件夾，然后將routes.js文件加入進去。

 則routes.js代碼如下

import Vue from 'vue'
import VueRouter from 'vue-router'
//引入創(chuàng)建的兩個組件
import Cart from '../Cart.vue'
import Me from '../Me.vue'
//使用路由實例插件
Vue.use(VueRouter)
const router = new VueRouter({
 mode:'history',
 base: '__dirname',
 routes:[
 //將頁面組件與path指令的路由關(guān)聯(lián)
 {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 提供了兩個指令標簽

: 渲染路徑匹配到的視圖組件
: 支持用戶在具有路由功能的應(yīng)用中導(dǎo)航

在有了上面的兩個指令標簽，我們就可以在程序入口 App.vue編寫相應(yīng)的代碼了：

到此上面的代碼已經(jīng)實現(xiàn)了預(yù)期的功能了。

 然后我們看to ="/cart"這個里面的路徑其實已經(jīng)在{path:'/cart',component:Cart}定義過了，如果需要修改，就得需要這兩個地方同時修改（如果有其他地方用的就改動的更多）

那么直接將{path:'/cart',component:Cart}中的路徑取出來豈不是很好。

這個時候我們的 vue-router提供了一種隱式的路由引用方式，稱之為 —— 命名路由

簡單來說就是通過路由的名稱引用來取代Url

于是VueRouter的配置代碼改為如下：

const router = new VueRouter({
 mode:'history',
 base: '__dirname',
 routes:[
 //將頁面組件與path指令的路由關(guān)聯(lián)
 {name:'cart',path:'/cart',component:Cart},
 {name:'me',path:'/me',component:Me}
 ]
})

這樣我們在 的to屬性使用v-bind綁定到Vue實例中，然后通過名稱直接得到Url了

于是App.vue中的鏈接部分的代碼改為如下

  

   
   
購物車
   
  
  

   
   
個人中心
   
  

至此，使用vue-router完成了簡單導(dǎo)航功能

說明

默認渲染成帶有正確鏈接的標簽 ，也可以通過配置 tag 屬性生成別的標簽

比如

  

   
   
購物車
   
  

感謝各位的閱讀！關(guān)于“怎么使用vue-router完成簡單導(dǎo)航功能”這篇文章就分享到這里了，希望以上內(nèi)容可以對大家有一定的幫助，讓大家可以學(xué)到更多知識，如果覺得文章不錯，可以把它分享出去讓更多的人看到吧！

另外有需要云服務(wù)器可以了解下創(chuàng)新互聯(lián)scvps.cn，海內(nèi)外云服務(wù)器15元起步，三天無理由+7*72小時售后在線，公司持有idc許可證，提供“云服務(wù)器、裸金屬服務(wù)器、高防服務(wù)器、香港服務(wù)器、美國服務(wù)器、虛擬主機、免備案服務(wù)器”等云主機租用服務(wù)以及企業(yè)上云的綜合解決方案，具有“安全穩(wěn)定、簡單易用、服務(wù)可用性高、性價比高”等特點與優(yōu)勢，專為企業(yè)上云打造定制，能夠滿足用戶豐富、多元化的應(yīng)用場景需求。

網(wǎng)站題目：怎么使用vue-router完成簡單導(dǎo)航功能-創(chuàng)新互聯(lián)
標題來源：http://weahome.cn/article/cspegc.html