vue-动态路由

　　目前路由的跳转是写死的，比如to="/user"，那就会跳到对应的组件；

　　现在我们的需求是，我访问 /user/123 或 /user/456 再或 /user/dao等等，都能跳到同一页面，并且把 /user后面的参数给带过来。这个实际就像学习springmvc时的restful风格一样；

　　分三步走：

　　　　1. to的属性值是可变的，后面跟的参数取决于data

<template>
  <div id="nav">
    <router-link :to="'/user/'+userId">User</router-link>
  </div>
  <router-view/>
</template>

<script>
export default {
  data(){
    return {
      userId: 'huya'
    }
  }
}

　　　　2. 设置路由的映射规则，带占位符

const routes = [
  {
    path: '/',
    name: 'portal',
    redirect: '/home'
  },
  {
    path: '/user/:userId', //占位符的名字是userId,在接收该参数时，参数名是有用的；如果访问的路径是/user，是匹配这个路由的，必须后面跟东西
    name: 'User',
    component: User
  }
]

　　　　3. 在跳转的组件中接收该参数

<template>
  <div>
    <h1>我是{{$route.params.userId}}</h1>
  </div>
</template>

　　一个非常要注意的地方：$router和 $route 是两个完全不一样的东西。$router是我们的 new VueRouter，可在全部的组件进行使用；$route是当前的路由；比如说是User路由 来 跳转到 User组件的，那当前的路由就是User路由