vueRouter学习心得

学习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