核心原理：
將組件 (components) 映射到路由 (routes)脏毯，然后告訴 Vue Router 在哪里渲染它們
- 定義兩個(gè)組件
const Foo = { template: '<div>foo</div>' }
const Bar = { template: '<div>bar</div>' }
- 形成路由映射
const routes = [
{ path: '/foo', component: Foo },
{ path: '/bar', component: Bar }
]
- .建立路由
const router = new VueRouter({
routes: routes
})
- 將路由綁定到視圖
const app = new Vue({
router
}).$mount('#app')
- 選擇視圖展示的位置（所綁定的#app）
<div id="app">
<router-view/>//這里將渲染顯示組件
</div>
嵌套關(guān)系
如果一個(gè)組件里面還有動(dòng)態(tài)變化的各種組件匾七，那么就形成了路由嵌套關(guān)系矛纹！
當(dāng)我們的組件里面是這樣：
const Foo = {
template: `
<div class="user">
<h2>User {{ $route.params.id }}</h2>
//我也有內(nèi)嵌組件
<router-view></router-view>
</div>
`
}
那么在定義映射的是時(shí)候索守，就需要這樣,加上兒子children
{ path: '/foo', component: Foo,
children: [
{
// UserProfile 會(huì)被渲染在 User 的 <router-view> 中
path: 'profile',
component: UserProfile
},
{
// UserPosts 會(huì)被渲染在 User 的 <router-view> 中
path: 'posts',
component: UserPosts
}
]
},
重定向
所謂重定向瞳购，就是你訪問(wèn)A地址的時(shí)候褪尝，直接跳到B地址
{ path: '/a', redirect: '/b' }
路由守衛(wèi)
當(dāng)我們?cè)L問(wèn)一個(gè)路由地址的時(shí)候因谎，我們都會(huì)經(jīng)過(guò)一個(gè)大門(mén)基括，這個(gè)大門(mén)就是這個(gè)路由守衛(wèi)，他能看到你之前的哪里的蓝角，想去哪里阱穗，大門(mén)是否讓你通過(guò)的數(shù)據(jù)和行為
- 定義了路由，寫(xiě)入鉤子函數(shù)（上面寫(xiě)過(guò)）
const router = new VueRouter({ ... })
router.beforeEach((to, from, next) => {
// ...
})
router.afterEach((to, from) => {
// ...finish使鹅，訪問(wèn)結(jié)束
})
- 訪問(wèn)前的鉤子函數(shù)
router.beforeEach((from ,to,next)=>{
if (to.path === '/login') {
next({ path: '/' }) //next函數(shù)表示可以GO揪阶，還可以帶參數(shù)哦
} else {
next()
}
})
