1 安裝
首先，通過 npm 安裝 vue-router 外掛：
npm install --save vue-router
複製程式碼安裝的外掛版本是：vue-router@3.0.2
2 用法
2.1 新建 vue 元件
在 router 目錄中，新建 views 目錄，然後新建兩個 vue 元件（一個頁面就對應一個元件）。
index.vue：
<template>
<div>首頁</div>
</template>
<script>
export default {
name: "index.vue"
}
</script>
<style scoped>
</style>
複製程式碼about.vue：
<template>
<div>關於我們</div>
</template>
<script>
export default {
name: "about"
}
</script>
<style scoped>
</style>
複製程式碼2.2 修改 main.js
// 引入 Vue 框架
import Vue from 'vue'
import VueRouter from 'vue-router';
//引入 hello.vue 元件
import Hello from './hello.vue'
//載入 vue-router 外掛
Vue.use(VueRouter);
/*定義路由匹配表*/
const Routers = [{
path: '/index',
component: (resolve) => require(['./router/views/index.vue'], resolve)
},
{
path: '/about',
component: (resolve) => require(['./router/views/about.vue'], resolve)
}]
//路由配置
const RouterConfig = {
//使用 HTML5 的 History 路由模式
mode: 'history',
routes: Routers
};
//路由例項
const router = new VueRouter(RouterConfig);
new Vue({
el: '#app',
router: router,
render: h => h(Hello)
})
複製程式碼步驟如下：
- 載入 vue-router 外掛。
- 定義路由匹配表，每個路由對映到一個元件。
- 配置路由。
- 新建路由例項。
- 在 Vue 例項中引用路由例項。
Routers 中的每一項，都有以下這些屬性：
| 屬性 | 說明 |
|---|---|
| path | 匹配路徑 |
| component | 需要對映的元件 |
webpack 把每一個路由都打包成一個 js 檔案。只有在請求該頁面時，才會載入這個 js 檔案，即按需載入。
如果需要一次性載入，那麼可以這樣配置：
{
path: '/index',
component: require('./router/views/index.vue')
}
複製程式碼配置了非同步路由之後，編譯出的頁面 js 被稱為 chunk，它們預設的命名格式為 0.main.js、1.main.js 等等。
可以在 webpack.config.js 中配置這個 chunk 的命名格式：
output: {
...
//chunk 檔名
chunkFilename:'[name].chunk.js'
}
複製程式碼重新整理頁面之後，就會在除錯模式看到 chunk 名稱已經被改變咯：
在 RouterConfig 中，我們使用了 HTML5 的 History 路由模式，即通過 "/" 來設定路徑。如果不配置 mode，RouterConfig 預設是使用 “#” （錨點）來匹配路徑。
注意： 生產環境中，服務端必須將所有路由都指向同一個 HTML，或設定 404 頁面為這個 HTML 頁面，否則重新整理頁面就會出現 404 錯誤。
2.3 配置 chunk 樣式
使用了 chunk 之後，每個 *.vue 檔案中所定義的樣式，預設通過 Javascript 來動態建立 <style> 標籤來寫入樣式。我們可以通過配置，把這些檔案中的樣式都統一寫入 main.css，修改 webpack.config.js ：
plugins: [//外掛
new ExtractTextPlugin({
filename: '[name].css',
allChunks: true
}),
...
]
複製程式碼2.4 配置 History 路由指令
在 package.json 中，修改 dev 指令：
"dev": "webpack-dev-server --open --history-api-fallback --config webpack.config.js",
複製程式碼2.5 掛載路由元件
在根例項，掛載路由元件：
<template>
<div>
<router-view></router-view>
</div>
</template>
複製程式碼執行時，<router-view> 會根據當前所配置的路由規則，渲染出不同的頁面元件。主介面中的公共部分，比如側邊欄、導航欄以及底部版權資訊欄，可以直接定義在根目錄，與<router-view> 同級。這樣，當切換路由時，切換的只是<router-view> 掛載的元件，其它內容不會變化。
2.6 執行
執行 npm run dev 之後，在瀏覽器位址列輸入不同的 URL ，就會看到掛載的不同元件資訊。
2.7 重定向
我們可以在路由配置表中，配置一項功能，當訪問的頁面不存在時，重定向到首頁：
const Routers = [
...
{//當訪問的頁面不存在時，重定向到首頁
path: '*',
redirect: '/index'
}
]
複製程式碼這樣，即使只訪問 http://localhost:8080/，也會自動跳轉到首頁啦 O(∩_∩)O~
2.8 帶引數的路由
路由 path 可以帶引數。比如文章 URL，路由的前半部分是固定的，後半部分是動態引數，形如：/article/xxx。它們會被路由到同一個頁面，在該頁面可以獲取 xxx 引數，然後根據這個引數來請求資料。
首先在 main.js 中配置帶引數的路由規則：
const Routers = [{
...
{
path: '/article/:id',
component: (resolve) => require(['./router/views/article.vue'], resolve)
}
...
]
複製程式碼然後在 router/views 下新建一個 article.vue ：
<template>
<div>{{$route.params.id}}</div>
</template>
<script>
export default {
name: "article",
mounted() {
console.log(this.$route.params.id);
}
}
</script>
<style scoped>
</style>
複製程式碼執行 npm run dev 後，在瀏覽器位址列中輸入 http://localhost:8080/article/123，就能訪問到 article.vue 元件咯：
注意： 因為配置的引數路由規則是
/article/:id，即必須帶 id 引數，否則是會重定向會/index的哦O(∩_∩)O~