Vue router專為單頁應(yīng)用產(chǎn)生。
1.簡單路由，不需要引入功能完整的路由庫:
image.png
2.添加Vuerouter -》 將組件映射到routes-》 告訴Vuerouter在哪里渲染他們
<router-view>:路由匹配到的組件將渲染在這里
<router-link>:使用router-link組件導航，通過傳入to屬性來指定鏈接，被渲染成一個a標簽。
采用模塊化編程機制（導入Vue，Vuerouter，調(diào)用Vue.use(VueRouter)）：
1.定義/import組件
- 定義路由（每個路由映射一個組件）
路由列表：
const routes = [{path:'/foo', component:Foo}，
{path:'/bar', component:Bar}]
3.創(chuàng)建router實例,傳‘routes’配置
const router = new VueRouter({
routes
})
4.創(chuàng)建和掛載根實例。通過router參數(shù)注入路由
const app = new Vue({
router
}).$mount('#app')
- 把某種模式匹配到的所有路由，全都映射到同個組件把某種模式匹配到的所有路由，全都映射到同個組件，使用動態(tài)路徑參數(shù)（以:開頭），當匹配到一個路由時，參數(shù)值被設(shè)置到this.$route.params中，可以在組件中使用。
4.嵌套路由
在嵌套的出口中渲染組件，需要在VueRouter 的參數(shù)中使用children配置。
5.編程式導航
除了使用<router-link>來定義導航鏈接，還可以借助router的實例方法。
router.push(location, onComplete? , onAbort?)
image.png
6.命名路由：
建立名稱標志一個路由，在創(chuàng)建Router實例的routes選項中給某個路由設(shè)置名稱：name： 'user', 要鏈接到一個命名路由時，傳入name屬性。
image.png
image.png
- 路由重定向
在routes選項中，使用redirect關(guān)鍵字
routes: [{path: '/a', redirect: '/b'},
{path: '/a', redirect: {name:'foo'}} //重定向目標可以是命名的路由
{path: '/a', redirect: to=>{ ...}} //重定向目標也可以是一個方法用于動態(tài)返回重定向目標 方法接收目標路由作為參數(shù)，返回重定向的字符串路徑]
