[toc] `routes`是new Router時必傳的參數，它是一個數組，里面存儲著本App每一條路由的相關配置，比如，什么路徑渲染什么組件 ## redirect ``` redrirect:'/home' ``` ``` redirect:{path:'/home'} redirect:{name:'home'} ``` ## path `*`代表匹配任何路由 ### 動態路由 在路由組件上可以通過`this.$route.params`那么動態路由對象 ``` this.$route.params.id ``` 其中的動態路由對象的屬性是在你定義路由時指定的 ``` ,{ path: '/detail/:id' , name: 'Detail' , component: Detail } ``` ## props:將動態路由參數作為屬性傳入組件 ``` ,{ path:'/app/:id' //:id會作為屬性傳入到Todo組件 ,props:true ``` 也可以手動傳入一些數據 ``` ,props:{ id:456 ``` 或則根據query來計算出一個值傳過去 ``` props根據x來傳遞 route同組件內部的this.$route ,props:(route)=>({id:route.query.b}) ``` ## component 一個路由對應一個路由組件 注意和components區分，有它無我 ## components:命名視圖 三欄布局時(上，側，內容) 如果點擊頂部導航，側欄要變，就可以用這個 ``` //支持命名視圖 ,components:{ //沒有名字的<router-view>會顯示這個 default:Todo //名字為a的<router-view>會顯示這個 ,a:Login } ``` ## name 每個路由都可以有個名字，可用于router-link跳轉 ## alias ``` { path:'/home' ,alias:'/index' } ``` 訪問`/index`等同于`/home` ## 子路由 注意子路由不帶有`/`作為前綴，它的路徑是順著父路由路徑往下延伸的， 如果帶有`/`，則表示是從根路徑開始了 ``` ,{ path:'/app/:id' ,component:Todo //隨便取 ,name:'app' ,meta:{ //可以通過路由信息對象拿到這里定義的數據 title:'this is app' ,description:'asdasd' } //子路由 // 需在app下設置children路由的router-view ,children:[ { path:'test' ,component:Login } ] } ``` ## exact 默認只有路徑是以指定to開頭，那么那個link的樣式就會被激活  如果不想這樣，需將exact設置為true  原理是設置為true后，只有完全匹配路徑的link才有`.router-link-active`這個樣式 --- 除了上面添加exact的方式，其實我們還可以通過給`.router-exact-link-active`添加樣式而不是給 .router-link-active 添加樣式來實現樣式的精確匹配 ## meta meta是我們用來存儲任何想要在下一個路由得到的數據