來源 | http://www.fly63.com/article/detial/8806

一、安裝

1、如果你用vue-cli腳手架來搭建項目，配置過程會選擇是否用到路由，如果選擇Yes，后面下載依賴會自動下載vue-router。

Install vue-router?  Yes

2、npm

npm install vue-router

二、將組件 (components) 映射到路由 (routes)并渲染

步驟一

使用vue-cli搭建項目，項目結(jié)構(gòu)中會有一個src文件目錄，src文件目錄下會有一個router文件夾，此處就是用來編寫路由組件的地方。

在src/router/index.js，這個文件就是路由的核心文件。在這個文件里，我們需要做的是，將組件 (components) 映射到路由 (routes)。

// 0. 如果使用模塊化機制編程，導(dǎo)入Vue和VueRouter，要調(diào)用 Vue.use(VueRouter)import Vue from 'vue'  // 導(dǎo)入vueimport VueRouter from 'vue-router' // 導(dǎo)入vue-routerVue.use(VueRouter)// 1. 定義（路由）組件import Home from '@/components/Home'// 2. 創(chuàng)建 router 實例，然后傳 `routes` 配置export default new Router({ // 3. 定義路由，每個路由應(yīng)該映射一個組件， // “component”可以是通過 Vue.extend() 創(chuàng)建的組件構(gòu)造器， // 或者，只是一個組件配置對象。  routes: [    {      path: '/',       name: 'Home',       component: Home    }  ]})

步驟二

在src文件目錄下找到main.js文件，在此目錄創(chuàng)建和掛載根實例，通過 router 配置參數(shù)注入路由，從而讓整個應(yīng)用都有路由功能。代碼如下：

// 1. 引入routerimport router from './router'// 2. 創(chuàng)建和掛載根實例new Vue({  router}).$mount('#app')

步驟三

在src文件目錄下找到app.vue文件，在該文件夾下引用router-view組件，用于渲染路由匹配到的組件。ps：一般情況下會在app.vue文件下引用router-view組件，當(dāng)然也可以在其他地方使用，根據(jù)實際情況來定。用法如下：

<template>  <div>    <router-view />  </div></template>

三、聲明式導(dǎo)航

使用 <router-link> 創(chuàng)建 a 標(biāo)簽來定義導(dǎo)航鏈接。

<div id="app">    <!-- 使用 router-link 組件來導(dǎo)航. -->    <!-- 通過傳入 `to` 屬性指定鏈接. -->    <!-- <router-link> 默認(rèn)會被渲染成一個 `<a>` 標(biāo)簽 -->    <router-link to="/foo">Go to Foo</router-link>    <!-- `replace` 不會向 history 添加新記錄，而是替換掉當(dāng)前的 history 記錄-->    <router-link to="/bar" replace>Go to Bar</router-link></div>

四、編程式導(dǎo)航

除了使用 <router-link> 創(chuàng)建 a 標(biāo)簽來定義導(dǎo)航鏈接，我們還可以借助 router 的實例方法，通過編寫代碼來實現(xiàn)。

router.push(location, onComplete?, onAbort?)

想要導(dǎo)航到不同的 URL，則使用 router.push 方法。這個方法會向 history 棧添加一個新的記錄，所以，當(dāng)用戶點擊瀏覽器后退按鈕時，則回到之前的 URL。

注意：如果提供了 path，params 會被忽略，需要提供路由的 name 或手寫完整的帶有參數(shù)的 path。

1、用法

// 字符串router.push('home')
// 對象router.push({path:'home'})
// 命名的路由router.push({name:'user',params:{userId:'123'}})
// 帶查詢參數(shù)，變成 /register?plan=privaterouter.push({path:'register',query:{plan:'private'}})

2、獲取參數(shù)的兩種常用方法：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 添加新記錄，而是跟它的方法名一樣 —— 替換掉當(dāng)前的 history 記錄。

this.$router.push({path:'/home',replace:true})//如果是聲明式就是像下面這樣寫：<router-link :to="..." replace></router-link>// 編程式:router.replace(...)

router.go(n)

這個方法的參數(shù)是一個整數(shù)，意思是在 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 默認(rèn) hash 模式，如果要使用路由的history模式，使用方式如下：

const router = new Vue Router({    mode: 'history',    routes: [...]})

注：history這種模式還需要后臺配置支持。因為我們的應(yīng)用是個單頁客戶端應(yīng)用，如果后臺沒有正確的配置，當(dāng)用戶在瀏覽器直接訪問 http://oursite.com/user/id 就會返回 404。
如果你的應(yīng)用加載的是空白頁，可以考慮一下是不是使用了history模式。

六、路由懶加載

簡單使用

// 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 會將任何一個異步模塊與相同的塊名稱組合到相同的異步塊中

本文完?