配置

引入

src 文件夾下的 main.js 文件內(nèi)寫入以下代碼
import Vue from 'vue'
import VueRouter from 'vue-router'
Vue.use(VueRouter)

在main.js里 創(chuàng)建和掛載實例
new Vue({
    el:"#box",
    router：VueRouter 
});

html

<div id="box"> 
    <router-link to="/one">One</router-link>
    <router-link to="/two">Two</router-link>
    <router-view></router-view>
</div>

< router-view > 路由匹配到的組件將渲染在這里

js

var routes = [
    {
        path:"/one",
        component:{template:"#a"}
    },
    {
        path:"/two",
        component:{template:"#b"}
    },
];
// 定義路由組件
var router = new VueRouter({
    routes
});
// 定義路由

動態(tài)路由

{
    path:"/two:id",
    component:{template:"#b"},
},
當(dāng)我們在地址后面直接添加任意字符,我們會發(fā)現(xiàn)文檔內(nèi)容隨著我們的更改而改變.

嵌套路由

嵌套路由即是在原路由的基礎(chǔ)上增加一個 children ,children 是一個數(shù)組.
并且我們還需要在原來的組件上添加< router-view >來渲染 chlidren 里面的路由.
{
    path:"/two",
    component:{template:"#b"},
    children:[
        {
            path:":id",
            component:{
                template:"#c"
            }
        }
    ]
},

編程式導(dǎo)航

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

router.push(location)

這個方法會向 history 棧添加一個新的記錄，所以，當(dāng)用戶點(diǎn)擊瀏覽器后退按鈕時，則回到之前的 URL。
點(diǎn)擊 <router-link :to="..."> 等同于調(diào)用 router.push(...)。
該方法的參數(shù)可以是一個字符串路徑，或者一個描述地址的對象。例如：
// 字符串
router.push('home')

// 對象
router.push({ path: 'home' })

// 命名的路由
router.push({ name: 'user', params: { userId: 123 }})

// 帶查詢參數(shù)，變成 /register?plan=private
router.push({ path: 'register', query: { plan: 'private' }})

router.replace(location)

跟 router.push 很像，唯一的不同就是，它不會向 history 添加新記錄，而是跟它的方法名一樣 —— 替換掉當(dāng)前的 history 記錄。

router.go(n)

這個方法的參數(shù)是一個整數(shù)，意思是在 history 記錄中向前或者后退多少步，類似 window.history.go(n)。
eg：
// 在瀏覽器記錄中前進(jìn)一步，等同于 history.forward()
router.go(1)

// 后退一步記錄，等同于 history.back()
router.go(-1)

// 前進(jìn) 3 步記錄
router.go(3)

// 如果 history 記錄不夠用，那就默默地失敗唄
router.go(-100)
router.go(100)

命名路由

有時我們通過一個名稱來標(biāo)識一個路由顯得更方便一些，特別是在鏈接一個路由，或者是執(zhí)行一些跳轉(zhuǎn)的時候。你可以在創(chuàng)建 Router 實例的時候，在 routes 配置中給某個路由設(shè)置名稱。
我們直接在路由下添加一個 name 即可.
eg:
var routes = [
    {
        path:"/one",
        name:"one",
        component:{template:"#a"}
    },
    {
        path:"/two",
        name:"two",
        component:{template:"#b"},
    },
]
要鏈接到一個命名路由，可以給 router-link 的 to 屬性傳一個對象：
<router-link :to="{ name: 'one'}">User</router-link>
<router-link :to="{ name: 'two'}">User</router-link>

命名視圖

有時候想同時（同級）展示多個視圖，而不是嵌套展示，例如創(chuàng)建一個布局，有 sidebar（側(cè)導(dǎo)航） 和 main（主內(nèi)容） 兩個視圖，這個時候命名視圖就派上用場了。
你可以在界面中擁有多個單獨(dú)命名的視圖，而不是只有一個單獨(dú)的出口。如果 router-view 沒有設(shè)置名字，那么默認(rèn)為 default。
所以我們需要為視圖命名
eg:
    <router-view name="a"></router-view>
    <router-view name="b"></router-view>
var Foo = { template: '<div>foo</div>' }
var Bar = { template: '<div>bar</div>' }
var routes = [
        {
            path:"/one",
            name:"one",
            components:{
                a:Foo,
                b:Bar
            }
        },
    ]

重定向和別名

重定向

重定向(Redirect)就是通過各種方法將各種網(wǎng)絡(luò)請求重新定個方向轉(zhuǎn)到其它位置,用于網(wǎng)站調(diào)整或網(wǎng)頁被移到一個新地址,它也是通過 routes 配置來完成，下面例子是從 /a 重定向到 /b：
var router = new VueRouter({
  routes: [
    { path: '/a', redirect: '/b' }
  ]
})

別名

/a 的別名是 /b，意味著，當(dāng)用戶訪問 /b 時，URL 會保持為 /b，但是路由匹配則為 /a，就像用戶訪問 /a 一樣。
簡單的說就是給 /a 起了一個外號叫做 /b ,但是本質(zhì)上還是 /a
var router = new VueRouter({
  routes: [
    { path: '/a', component: A, alias: '/b' }
  ]
})