初学vue-router笔记2

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

1.app.vue中添加两个router-link
 <!--  增加两个到user组件的导航，可以看到这里使用了不同的to属性 -->
 <router-link to="/user/123">123</router-link>
 <router-link to="/user/456">456</router-link>

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

3.user组件
<template>
    <div>
        <h1>User</h1>
        <div>我是user组件,动态部分是{{ message }}</div>
    </div>
</template>
<script>
    export default {
        data(){
            return {
                message:''
            }
        },
        watch:{
            $route(to,from){
                // to表示的是你要去的那个组件，from 表示的是你从哪个组件过来的，它们是两个对象，你可以把它打印出来，它们也有一个param 属性
                console.log(to);
                console.log(from);
                this.message = to.params.id
            }
        }
    }
</script> 

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

1.home.vue中添加子类：
<template>
    <div>
        <h1>home</h1>
        <!-- router-link 的to属性要注意，路由是先进入到home,然后才进入相应的子路由如 fruit,所以书写时要把 home 带上 -->
        <p>
            <router-link to="/home/fruit">水果</router-link>
            <router-link to="/home/food">食物</router-link>
        </p>
        <router-view></router-view>
    </div>
</template>

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属性可以使用

 <router-link to="/user/123">User123</router-link> // 和下面等价 
 <router-link :to="{ name: 'user', params: { userId: 123 }}">User</router-link>   // 当使用对象作为路由的时候，to前面要加一个冒号,表示绑定