动态路由

在某些情况下，一个页面的path路径可能不确定，动态确定。

比如我们进入用户登录界面时，希望路径是:/user/name，也就是除了前面的/user还要跟上用户的id。这种path和component的匹配关系，叫动态路由(路由传递数据的一种方式)。

定义一个user组件：

<template>
  <div>
    <h1>我是用户</h1>
  </div>
</template>

<script>
    export default {
        name: "user",
    }
</script>

<style scoped>

</style>

配置组件路径映射：
注意这里的：/id

    {
      path:'/user/:id',
      name:'user',
      component:user
    }

使用该组件
id从data里面动态获取，用v-bind绑定router-link的to属性，这里需要字符串拼接

<template>
  <div id="app">
    <router-view/>
    <router-link to="home" tag="button" replace active-class="active">Home</router-link>
    <router-link to="About" tag="button">About</router-link>
    <router-link :to="'user/'+userID" tag="button">user</router-link>

  </div>
</template>

<script>
export default {
  name: 'App',
  data(){
    return{
      userID:"张三"
    }
  }
}
</script>

结果：
如果要在user组件中显示该id，
在user组件中获取id：

<template>
  <div>
    <h1>我是用户</h1>
    {{$route.params.id}}
  </div>
</template>

这里需要区分$ router 和$ route,前者是获取创建的路由实例（new Router），后者是获取活跃的路由（也就是目前显示的组件）。
注意这里的$route.params.id的id是对应前面配置路径映射path的冒号后面的id，如果冒号后面是abc那么这里也应该是abc