使用vue-router完成簡單的導航功能

這篇文章主要介紹了關於使用vue-router完成簡單的導航功能，有著一定的參考價值，現在分享給大家，有需要的朋友可以參考一下

vue-router是Vue. js官方提供的一套專用的路由工具庫。這篇文章主要介紹了使用vue-router完成簡單導航功能,需要的朋友可以參考下

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>
 <!-- 这个p里面的内容可设置不同以区分 -->
 <p>购物车</p>
</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 提供了兩個指令標籤

975b587bf85a482ea10b0a28848e78a4 : 渲染路徑匹配到的視圖元件

d0d6ee6dc6bdae089f3fc5baf31e4206 : 支援使用者在具有路由功能的應用程式中導航

在有了上面的兩個指令標籤，我們就可以在程式入口App.vue編寫對應的程式碼了：

<template>
 <p id="app">
 <p class="tabs">
  <ul>
  <li>
   <router-link to ="/cart">
   <p>购物车</p>
   </router-link>
  </li>
  <li>
   <router-link to ="/me">
   <p>个人中心</p>
   </router-link>
  </li>
  </ul>
 </p>
 <p class="content">
  <!-- 使用 router-view 渲染视图 -->
  <router-view></router-view>
 </p>
 </p>
</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}
 ]
})

這樣我們在

7d8e402fe7d0f5de62f050028d961240的to屬性使用v-bind綁定到Vue實例中，然後透過名稱直接得到Url了

於是App.vue中的連結部分的程式碼改為如下

  <li>
   <router-link :to ="{name:&#39;cart&#39;}">
   <p>购物车</p>
   </router-link>
  </li>
  <li>
   <router-link :to ="{name:&#39;me&#39;}">
   <p>个人中心</p>
   </router-link>
  </li>

至此，使用vue-router完成了簡單導航功能

說明

b988a8fd72e5e0e42afffd18f951b277預設渲染成有正確連結的3499910bf9dac5ae3c52d5ede7383485標籤，也可以透過配置tag 屬性產生別的標籤

例如

#

  <li>
   <router-link :to ="{name:&#39;cart&#39;}" tag="span">
   <p>购物车</p>
   </router-link>
  </li>

以上就是本文的全部內容，希望對大家的學習有幫助，更多相關內容請關注PHP中文網！

相關推薦：

關於vue使用Element元件時v-for迴圈裡的表單項目驗證的方法

## Vue實作textarea固定輸入行數與新增底線樣式的想法

以上是使用vue-router完成簡單的導航功能的詳細內容。更多資訊請關注PHP中文網其他相關文章！