一、安裝
1、如果你用vue-cli腳手架來搭建項目，配置過程會選擇是否用到路由，如果選擇Yes，后面下載依賴會自動下載vue-router。
Install vue-router? Yes 2、npm
npm install vue-router
二、將組件 (components) 映射到路由 (routes)並渲染
步驟一
使用vue-cli搭建項目，項目結構中會有一個src文件目錄，src文件目錄下會有一個router文件夾，此處就是用來編寫路由組件的地方。
在src/router/index.js，這個文件就是路由的核心文件。在這個文件里，我們需要做的是，將組件 (components) 映射到路由 (routes)。
// 0. 如果使用模塊化機制編程，導入Vue和VueRouter，要調用 Vue.use(VueRouter) import Vue from 'vue' // 導入vue import VueRouter from 'vue-router' // 導入vue-router Vue.use(VueRouter) // 1. 定義（路由）組件 import Home from '@/components/Home' // 2. 創建 router 實例，然后傳 `routes` 配置 export default new Router({ // 3. 定義路由，每個路由應該映射一個組件， // “component”可以是通過 Vue.extend() 創建的組件構造器， // 或者，只是一個組件配置對象。 routes: [ { path: '/', name: 'Home', component: Home } ] }) 步驟二
在src文件目錄下找到main.js文件，在此目錄創建和掛載根實例，通過 router 配置參數注入路由，從而讓整個應用都有路由功能。代碼如下：
// 1. 引入router import router from './router' // 2. 創建和掛載根實例 new Vue({ router }).$mount('#app') 步驟三
在src文件目錄下找到app.vue文件，在該文件夾下引用router-view組件，用於渲染路由匹配到的組件。ps：一般情況下會在app.vue文件下引用router-view組件，當然也可以在其他地方使用，根據實際情況來定。用法如下：
<template> <div> <router-view /> </div> </template>
三、聲明式導航
使用 <router-link> 創建 a 標簽來定義導航鏈接。
<div id="app"> <!-- 使用 router-link 組件來導航. --> <!-- 通過傳入 `to` 屬性指定鏈接. --> <!-- <router-link> 默認會被渲染成一個 `<a>` 標簽 --> <router-link to="/foo">Go to Foo</router-link> <!-- `replace` 不會向 history 添加新記錄，而是替換掉當前的 history 記錄--> <router-link to="/bar" replace>Go to Bar</router-link> </div>
四、編程式導航
除了使用 <router-link> 創建 a 標簽來定義導航鏈接，我們還可以借助 router 的實例方法，通過編寫代碼來實現。
router.push(location, onComplete?, onAbort?)
想要導航到不同的 URL，則使用 router.push 方法。這個方法會向 history 棧添加一個新的記錄，所以，當用戶點擊瀏覽器后退按鈕時，則回到之前的 URL。
注意：如果提供了 path，params 會被忽略，需要提供路由的 name 或手寫完整的帶有參數的 path。
1、用法
// 字符串 router.push('home') // 對象 router.push({path:'home'}) // 命名的路由 router.push({name:'user',params:{userId:'123'}}) // 帶查詢參數，變成 /register?plan=private router.push({path:'register',query:{plan:'private'}}) 2、獲取參數的兩種常用方法：params和query
const userId='123' // 傳值 router.push({name:'user',params:{userId}}) // 取值 this.$route.params.userId // 傳值 router.push({path:`/user/${userId}`}) // 取值 this.$route.query.userId router.replace(location, onComplete?, onAbort?)
跟 router.push 很像，唯一的不同就是，它不會向 history 添加新記錄，而是跟它的方法名一樣 —— 替換掉當前的 history 記錄。
this.$router.push({path:'/home',replace:true}) //如果是聲明式就是像下面這樣寫： <router-link :to="..." replace></router-link> // 編程式: router.replace(...) router.go(n)
這個方法的參數是一個整數，意思是在 history 記錄中向前或者后退多少步，類似 window.history.go(n)。
// 在瀏覽器記錄中前進一步，等同於 history.forward() router.go(1) // 后退一步記錄，等同於 history.back() router.go(-1) // 前進 3 步記錄 router.go(3) // 如果 history 記錄不夠用，那就默默地失敗唄 router.go(-100) router.go(100)
五、html5 History 模式
vue-router 默認 hash 模式，如果要使用路由的history模式，使用方式如下：
const router = new Vue Router({ mode: 'history', routes: [...] })注：history這種模式還需要后台配置支持。因為我們的應用是個單頁客戶端應用，如果后台沒有正確的配置，當用戶在瀏覽器直接訪問 http://oursite.com/user/id 就會返回 404。
如果你的應用加載的是空白頁，可以考慮一下是不是使用了history模式。
vi設計http://www.maiqicn.com 辦公資源網站大全https://www.wode007.com
六、路由懶加載
簡單使用
// 1. 定義一個能夠被 webpack 自動代碼分割的異步組件 const Foo = () => import('./Foo.vue') // 2. 路由配置 const router = new VueRouter({ routes: [ { path: '/foo', component: Foo } ] }) 把組件按組分塊
有時候我們想把某個路由下的所有組件都打包在同個異步塊 (chunk) 中。只需要使用 命名 chunk，一個特殊的注釋語法來提供 chunk name (需要 webpack > 2.4)。
const Foo = () => import(/* webpackChunkName: "group-foo" */ './Foo.vue') const Bar = () => import(/* webpackChunkName: "group-foo" */ './Bar.vue') const Baz = () => import(/* webpackChunkName: "group-foo" */ './Baz.vue') Webpack 會將任何一個異步模塊與相同的塊名稱組合到相同的異步塊中。