配置
引入
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)用戶點擊瀏覽器后退按鈕時溜哮，則回到之前的 URL屿良。
點擊 <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：
// 在瀏覽器記錄中前進一步，等同于 history.forward()
router.go(1)
// 后退一步記錄盾舌，等同于 history.back()
router.go(-1)
// 前進 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)容） 兩個視圖，這個時候命名視圖就派上用場了技潘。
你可以在界面中擁有多個單獨命名的視圖遥巴，而不是只有一個單獨的出口。如果 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' }
]
})
