首先官方文件: https://router.vuejs.org/zh/

Vue Router 是Vue.js官方的路由管理器。它和 Vue.js 的核心深度整合，讓構建單頁面應用變得易如反掌。

• 巢狀的路由/視圖表
• 模組化的、基於元件的路由配置
• 路由引數、查詢、萬用字元
• 基於 Vue.js 過渡系統的檢視過渡效果
• 細粒度的導航控制
• 帶有自動啟用的 CSS class 的連結
• HTML5 歷史模式或 hash 模式，在 IE9 中自動降級
• 自定義的滾動條行為

路由屬性配置說明

export default new Router({
    mode: 'history', //路由模式，取值為history與hash
 

    base: '/', //打包路徑，預設為/，可以修改
    routes: [
    {
        path: string, //路徑
        ccomponent: Component; //頁面元件
        name: string; // 命名路由-路由名稱
        components: { [name: string]: Component }; // 命名檢視元件
        redirect: string | Location | Function; // 重定向
        props: boolean | string | Function; // 路由元件傳遞引數
 

        alias: string | Array<string>; // 路由別名
        children: Array<RouteConfig>; // 巢狀子路由
        beforeEnter?: (to: Route, from: Route, next: Function) => void; // 路由單獨鉤子
        meta: any; // 自定義標籤屬性，比如：是否需要登入
        icon: any; // 圖示
        // 2.6.0+
        caseSensitive: boolean; // 匹配規則是否大小寫敏感？(預設值：false)
 

        pathToRegexpOptions: Object; // 編譯正則的選項
    }
    ]
})

頁面跳轉

• router-link標籤跳轉　

//在html標籤內使用router-link跳轉，相應於超連結a標籤
//to：導航路徑
<p><router-link to="/">首頁</router-link>
   <router-link to="/hello">hello</router-link>
</p>

• 程式設計式導航

this.$router.push('/xxx')

<button @click="goHome">回到首頁</button>

export default {
    name: 'app',
    methods: {
        goHome(){
            this.$router.push('/home');
        }
    }
}

• 其他常用方法

//  後退一步記錄，等同於 history.back()
this.$router.go(-1)
// 在瀏覽器記錄中前進一步，等同於 history.forward()
this.$router.go(1)

路由巢狀

採用在children後跟路由陣列來實現，數組裡和其他配置路由基本相同，需要配置path和component，然後在相應部分新增<router-view/>來展現子頁面資訊，相當於嵌入iframe.

 <!-- 新增子路由導航 -->
 <p>
      <router-link to="/home">首頁</router-link> | 
      <router-link to="/home/one">-子頁面1</router-link> |
      <router-link to="/home/two">-子頁面2</router-link>
</p>
<!-- 子頁面展示部分 -->
<router-view/>

export default new Router({
    routes: [
    {
        path: '/', // 預設頁面重定向到主頁
        redirect: '/home'
    },
    {
        path: '/home', // 主頁路由
        name: 'Home',
        component: Home,
        children:[ // 巢狀子路由
            {
                path:'one', // 子頁面1
                component:One
            },
            {
                path:'two', // 子頁面2
                component:Two
            },
        ]
    }
    ]
})

路由傳遞引數

通過<router-link> 標籤中的to傳參

<router-link :to="{name: 'one', params:{username:'test123'}}">子頁面1</router-link>

<h2>{{this.$route.params.username}}</h2>

url中傳遞引數

//路由配置
{
    path:'/home/two/:id/:name', // 子頁面2
    component:Two
},

// 元件接受值
<p>ID：{{ $route.params.id}}</p>
<p>名稱：{{ $route.params.name}}</p>

// router-link
<router-link to="/home/two/1/張三">子頁面2</router-link>

程式設計式導航-params傳遞引數

// router
{
    path:'/home/three', // 子頁面3
    name: 'three',
    component:Three
}

// template
<button @click="toThreePage">頁面3-params傳參</button>

// script
methods: {
    toThreePage() {
        this.$router.push({name: 'three', params: {id: 1, name: 'zhangsan'}})
    }
}

// from template（three）
<p>ID：{{ $route.params.id}}</p>
<p>名稱：{{ $route.params.name}}</p>

//動態路由使用params傳遞引數，在this.$router.push() 方法中path不能和params一起使用，否則params將無效。需要用name來指定頁面。
//以上方式引數不會顯示到瀏覽器的位址列中，如果重新整理一次頁面，就獲取不到引數了，改進方式將第一部中的程式碼改成如下：

{
    path:'/home/three/:id/:name', // 子頁面3
    name: 'three',
    component:Three
}

程式設計式導航-query傳遞引數

//router
{
    path:'/home/three', // 子頁面3
    name: 'three',
    component:Three
}
// template
<button @click="toThreePage">頁面3-params傳參</button>

// script
methods: {
    toThreePage() {
        this.$router.push({path: '/home/three', query: {id: 24, name: 'banzhuan'}})
    }
}
// from template（three）
<p>ID：{{ $route.query.id}}</p>
<p>名稱：{{ $route.query.name}}</p>

// 動態路由使用query傳遞引數，會顯示到瀏覽器位址列中，以上鍊接為 /home/three?id=24&name=banzhuan

命名路由-命名檢視-重定向-別名

命名路由

//給一個路由命一個唯一的名稱，然後跳轉呼叫這個名稱即可
{
    path: 'one', // 子頁面1
    name: 'one', // 路由名稱-命名路由
    component: One // 頁面元件
}

// template跳轉呼叫
<router-link :to="{name: 'one'}">子頁面1</router-link>

// router.push函式跳轉呼叫
router.push({ name: 'one'}})

命名檢視

//在同一個頁面展示多個檢視，如果不用巢狀，只能採用命名檢視來實現

//Router.js
// 建立頁面元件
const Header = { template: '<div>Header</div>' }
const Left = { template: '<div>Left</div>' }
const Right = { template: '<div>Right</div>' }

Vue.use(Router)

export default new Router({
    routes: [
    {
        path: '/', // 主頁路由
        components: {
            default: Header,
            a: Left,
            b: Right
        }
    }
    ]
})

//template xxx.vue
<template>
    <div id="app">
        <router-view />
        <router-view name="a" class="left" />
        <router-view name="b" class="right" />
    </div>
</template>

重定向

export default new Router({
    routes: [
    {
        path: '/', // 預設頁面重定向到主頁
        redirect: '/home' // 重定向 不帶參
    },
    {
        path: '/home', // 主頁路由
        component: Home,
        children:[ // 巢狀子路由
            {
                path:'/home/two/:id/:name', // 子頁面2
                component:Two
            },
            {
                path:'/home/three/:id/:name', // 子頁面3
                name: 'three', // 路由名稱-命名路由
                redirect: '/home/two/:id/:name' // 重定向-傳遞引數
            },
        ]
    }
    ]
})

<router-link to="/">首頁</router-link> | 
<router-link to="/home/two/1/lisi">子頁面2</router-link>  |
<router-link :to="{name: 'three', params: {id: 24, name: 'banzhuan'}}">子頁面3</router-link>

別名

{
    path:'/one', // 子頁面1
    component:One,
    alias: '/oneother'
}
<router-link to="/oneother">子頁面1</router-link>

// redirect和alias的區別
// redirect：直接改變了url的值，把url變成了真實的path路徑。
// alias：url路徑沒有別改變，這種更友好，讓使用者知道自己訪問的路徑，只是改變了<router-view>中的內容。

// 別名請不要用在path為’/’中，如下程式碼的別名是不起作用的。
{
    path: '/',
    component: Hello,
    alias:'/home'
}

過渡動畫

<transition name="fade" mode="out-in">
    <router-view />
</transition>
//四個類名與transition的name屬性有關，比如name="fade"

/*頁面切換動畫*/
/*進入過渡的結束狀態，元素被插入時就生效，在過渡過程完成後移除*/
.fade-enter-active {
    transition: opacity .5s;
}
/*進入過渡的開始狀態，元素被插入時生效，只應用一幀後立刻刪除*/
.fade-enter {
    opacity: 0;
}
/*離開過渡的開始狀態，元素被刪除時觸發，只應用一幀後立刻刪除*/
.fade-leave {
    opacity: 1;
}
/*離開過渡的結束狀態，元素被刪除時生效，離開過渡完成後被刪除*/
.fade-leave-active {
    opacity:0;
    transition: opacity .5s;
}

mode模式

export default new Router({
    mode: 'history', //mode模式
    routes: [...]
})

mode取值說明：
（1）histroy：URL就像正常的 url，示例：http://localhost:8080/home
（2）hash：預設值，會多一個“#”，示例：http://localhost:8080/#/home

404頁面設定

//如果訪問的路由不存在，或者使用者輸入錯誤時，會有一個404友好的提示頁面，配置如下：
{
    path: '*',
    component: () => import('@/components/404')
}

路由鉤子

全域性鉤子函式

// 定義路由配置
const router = new VueRouter({ ... })

// 全域性路由攔截-進入頁面前執行
router.beforeEach((to, from, next) => {
    // 這裡可以加入全域性登陸判斷
    // 繼續執行
    next();
});
//在 2.5.0+ 你可以用 router.beforeResolve 註冊一個全域性守衛。這和 router.beforeEach 類似，區別是在導航被確認之前，同時在所有元件內守衛和非同步路由元件被解析之後，解析守衛就被呼叫。
router.beforeResolve((to, from, next) => {
　if (true) {
　　console.log("beforeResolve 驗證通過");
　　next();
　} else {
　　console.log("beforeResolve 驗證失敗");
　}
});

// 全域性後置鉤子-常用於結束動畫等
router.afterEach(() => {
    //不接受next
});

export default router;

//to: Route : 即將要進入的目標 [路由物件]
//from: Route : 當前導航正要離開的路由
//next: Function : 繼續執行函式

//next()：繼續執行 
//next(false)：中斷當前的導航。 
//next(‘/‘) 或 next({ path: ‘/‘ })：跳轉新頁面，常用於登陸失效跳轉登陸

路由獨享鉤子函式

//在路由配置中單獨加入鉤子
{
    path:'/home/one', // 子頁面1
        component: One,
        // 路由內鉤子
        beforeEnter: (to, from, next) => {
        console.log('進入前執行');
            next();
        }
}

元件內的鉤子函式

//在路由元件內定義鉤子函式：
//beforeRouteEnter：進入頁面前呼叫
//beforeRouteUpdate (2.2 新增)：頁面路由改變時呼叫，一般需要帶引數
//beforeRouteLeave：離開頁面呼叫
<script>
export default {
    name: 'Two',
    data () {
        return {
            msg: 'Hi, I am Two Page!'
        }
    },
    // 進入頁面前呼叫
    beforeRouteEnter(to, from, next) {
        console.log('進入enter路由鉤子')
        next()
    },
    // 離開頁面呼叫
    beforeRouteLeave(to,from, next){
        console.log('進入leave路由鉤子')
        next()
    },
    // 頁面路由改變時呼叫
    beforeRouteUpdate(to, from, next) {
        console.log('進入update路由鉤子')
        console.log(to.params.id)
        next()
    }
}
</script>

路由懶載入

//大專案中，為了提高初始化頁面的效率，路由一般使用懶載入模式，一共三種實現方式。
component: (resolve) => require(['@/components/One'], resolve)

component: () => import('@/components/Two')

components: r => require.ensure([], () => r(require('@/components/Three')), 'group-home')

// 第三種中，’group-home’是把元件按組分塊打包, 可以將多個元件放入這個組中，在打包的時候Webpack會將相同 chunk 下的所有非同步模組打包到一個非同步塊裡面。