初学vue-router笔记2

动态路由
       不同的用户登陆时候 userid是不同的，但是都会进入到同一个主页。那么路由中的path就不能写死，应该根据用户id来匹配路由设置。
       vue-router中，动态部分以 ：开头。
       例如导航到user组件：{ path: "/user/:id", component: user}。 下面来尝试一下

1.app.vue中添加两个router-link
 
 123
 456

2.router.js中添加动态routes
{
  /*新增user路径，配置了动态的id*/
    {
      path: "/user/:id",
      name: "user",
      component: user
    }
}

3.user组件

 

嵌套路由
       进入主页后可能还会有子分类，点击去到每个分类的时候需要路由导航。 vue提供了 childrens属性，也是一组路由相当于routes。
       下面尝试一下：

1.home.vue中添加子类：


2.router.js配置：
  {
        path:"/home",
　　　　　// 下面这个属性也不少，因为，我们是先进入home页面，才能进入子路由
        component: home,
　　　　 // 子路由
        children: [
            {
                path: "fruit",
                name: "fruit",
                component: fruit
            },
            {
                path: "food",
                name: "food",
                component: food
            },
            // 当进入到home时，下面的组件显示(防止下面显示了“水果”，但是上面组件却没有被选中)
           {
              path: "",
              component: phone
           }
        ]
    }

命名路由
       就是上面代码中的name属性。就是给路由起了一个名字。在router-link中to属性可以使用

 User123 // 和下面等价 
 User   // 当使用对象作为路由的时候，to前面要加一个冒号,表示绑定