vue-router 动态路由匹配

我们经常需要把某种模式匹配到的所有路由，全都映射到同个组件。例如，我们有一个 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文件组件中接收

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

    

      导航：
      hi页面
      首页
    

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

hi页面

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

模式	匹配路径	$route.params
/user/:username	/user/evan	{ username: 'evan' }
/user/:username/post/:post_id	/user/evan/post/123	{ username: 'evan', post_id: 123 }