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> : 渲染路徑匹配到的視圖組件