学习vue有一段时间,但是对vue-router内容还是不太理解,所以先对之前的学习内容做一个总结
动态路由
我们经常需要把某种模式匹配到的所有路由,全都映射到同个组件。例如,我们有一个 User 组件,对于所有 ID 各不相同的用户,都要使用这个组件来渲染。那么,我们可以在 vue-router 的路由路径中使用“动态路径参数”(dynamic segment) 来达到这个效果:
比如新浪新闻,他有很多新闻需要显示,但是不可能为所有的新闻都写一个页面,所以就需要动态路由,将所有的新闻导向一个组件
const User = {
template: '<div>User</div>'
}
const router = new VueRouter({
routes: [
// 动态路径参数 以冒号开头
{
path: '/user/:id', component: User }
]
//现在呢,像 /user/foo 和 /user/bar 都将映射到相同的路由。
})
嵌套路由
借助 vue-router,使用嵌套路由配置,就可以很简单地表达这种关系。
一个被渲染组件同样可以包含自己的嵌套 。例如,在 User 组件的模板添加一个 router-view:
const User = {
template: `
<div class="user">
<h2>User {
{ $route.params.id }}</h2>
<router-view></router-view>
</div>
`
}
要在嵌套的出口中渲染组件,需要在 VueRouter 的参数中使用 children 配置:
const router = new VueRouter({
routes