我们经常需要把某种模式匹配到的所有路由，全都映射到同个组件。例如，我们有一个 User 组件，对于所有 ID 各不相同的用户，都要使用这个组件来渲染。那么，我们可以在 vue-router 的路由路径中使用『动态路径参数』（dynamic segment）来达到这个效果：

1.我们可以在src——routers——index.js文件中

export default new Router({
  routes: [  //配置路由，这里是个数组
    {        //每一个链接都是一个对象
      path: '/', //链接路径
      name: 'HelloWorld',  //路由名称
      component: HelloWorld  //对应的组件模版
    },
    {        //每一个链接都是一个对象
      path: '/hi/:id', //链接路径
      name: 'hi',  //路由名称
      component: hi  //对应的组件模版
    }
  ]
})

2.我们在 vue文件组件中接收

<template>
    <div class="hello">
        <h1>{{msg}}</h1>
        <p>{{$route.params.id}}</p>
    </div>
</template>

3.在src——App.vue中使用传参数

    <p>
      导航：
      <router-link :to="'/hi/'+'judy'">hi页面</router-link>
      <router-link to="/">首页</router-link>
    </p>

也可以使用此方法传递参数

<router-link :to="{name:'hi',params:{username:'judy'}}">hi页面</router-link>

你可以在一个路由中设置多段『路径参数』，对应的值都会设置到 $route.params 中。例如：