怎么使用vue-router完成簡(jiǎn)單導(dǎo)航功能

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

Vue的優(yōu)點(diǎn)

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

vue-router是Vue.js官方提供的一套專(zhuān)用的路由工具庫(kù)

安裝命令如下

npm i vue-router -D

vue-router 實(shí)例是一個(gè)Vue插件，我們需要在Vue全局引用中通過(guò)Vue.use() 將它接入到Vue實(shí)例中。

在我們的工程中，,main.js是默認(rèn)的程序入口文件，所有的全局配置都會(huì)在這個(gè)文件中進(jìn)行。

我們?cè)趍ain.js中加入如下引用

import VueRouter from 'vue-router'
Vue.use(VueRouter)

這樣就完成了 vue-router最基本的安裝工作了。

接下來(lái)我們要實(shí)現(xiàn)的功能描述如下

在首頁(yè)上有兩個(gè)鏈接分別是：購(gòu)物車(chē)和個(gè)人中心

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

首先我們?cè)?src 目錄下建立兩個(gè)組件文件： Cart.vue Me.vue

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

<template>
 <!-- 這個(gè)div里面的內(nèi)容可設(shè)置不同以區(qū)分 -->
 <div>購(gòu)物車(chē)</div>
</template>
<script>
export default {}
</script>
<style lang="scss"></style>

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

VueRouter的定義非常簡(jiǎn)單：創(chuàng)建一個(gè)VueRouter實(shí)例，將路由path指定到一個(gè)組件類(lèi)型上

如下代碼所示（main.js）

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

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

新建一個(gè) config 文件夾，然后將routes.js文件加入進(jìn)去。

 則routes.js代碼如下

import Vue from 'vue'
import VueRouter from 'vue-router'
//引入創(chuàng)建的兩個(gè)組件
import Cart from '../Cart.vue'
import Me from '../Me.vue'
//使用路由實(shí)例插件
Vue.use(VueRouter)
const router = new VueRouter({
 mode:'history',
 base: '__dirname',
 routes:[
 //將頁(yè)面組件與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',
 //將路由實(shí)例添加到Vue實(shí)例中去
 router,
 render: h => h(App)
})

vue-router 提供了兩個(gè)指令標(biāo)簽

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

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

<template>
 <div id="app">
 <div class="tabs">
  <ul>
  <li>
   <router-link to ="/cart">
   <div>購(gòu)物車(chē)</div>
   </router-link>
  </li>
  <li>
   <router-link to ="/me">
   <div>個(gè)人中心</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>

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

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

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

這個(gè)時(shí)候我們的 vue-router提供了一種隱式的路由引用方式，稱(chēng)之為 —— 命名路由

簡(jiǎn)單來(lái)說(shuō)就是通過(guò)路由的名稱(chēng)引用來(lái)取代Url

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

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

這樣我們?cè)?<router-link >的to屬性使用v-bind綁定到Vue實(shí)例中，然后通過(guò)名稱(chēng)直接得到Url了

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

  <li>
   <router-link :to ="{name:'cart'}">
   <div>購(gòu)物車(chē)</div>
   </router-link>
  </li>
  <li>
   <router-link :to ="{name:'me'}">
   <div>個(gè)人中心</div>
   </router-link>
  </li>

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

說(shuō)明

<router-link>默認(rèn)渲染成帶有正確鏈接的<a>標(biāo)簽 ，也可以通過(guò)配置 tag 屬性生成別的標(biāo)簽

比如

  <li>
   <router-link :to ="{name:'cart'}" tag="span">
   <div>購(gòu)物車(chē)</div>
   </router-link>
  </li>

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