[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是我们用来存储任何想要在下一个路由得到的数据