vue-router超详细教程(3)

vue-router官方文档参考

动态路由匹配

应用场景

例如，我们有一个 User 组件，对于所有 ID 各不相同的用户，都要使用这个组件来渲染。那么，我们可以在 vue-router
的路由路径中使用“动态路径参数”(dynamic segment) 来达到这个效果：
/user/foo 和 /user/bar 都将映射到相同的路由。

代码
router/index.js

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

本页面

 <router-link to="/menu/123">跳转到Menu并带参数123</router-link>

目标页面
接收值

$route.params.id

设置404 Not found 路由

捕获所有路由或 404 Not found 路由

{
  // 会匹配所有路径
  path: '*'
}

放在路由表最后
补充

{
  // 会匹配以 `/user-` 开头的任意路径
  path: '/user-*'
}

// 给出一个路由 { path: '/user-*' }
this.$router.push('/user-admin')
this.$route.params.pathMatch // 'admin'
// 给出一个路由 { path: '*' }
this.$router.push('/non-existing')
this.$route.params.pathMatch // '/non-existing'