1,动态路由匹配 
const User = {
  template: '<div>User</div>'
}

const router = new VueRouter({
  routes: [
    // 动态路径参数 以冒号开头
    { path: '/user/:id', component: User }
  ]
})
2，一个“路径参数”使用冒号 : 标记。当匹配到一个路由时，参数值会被设置到 this.$route.params，可以在每个组件内使用。

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

当使用通配符路由时，请确保路由的顺序是正确的，也就是说含有通配符的路由应该放在最后。路由 { path: '*' } 通常用于客户端 404 错误，也就是访问的路径错了明明是#/mine 确写成了#/mine111

vue-router_带参数

 

 

 

3,嵌套路由也就是二级路由使用children 配置，children里面的路径不能写/

vue-router_字符串_02

 

 

 

 

 

4,编程式的导航 
// 字符串
this.$router.push("/dedail/" + id);

 

 vue-router_带参数_03

 

 

 vue-router_带参数_04

 

 

    如果用path 和query 跳转页面带参数   路由的配置 “/detail”  接收的话  this.$route.query.id

如果使用其他的跳转页面带参数，路由的配置"/detail/:id" 接受的话 this.$toute.params.id
重定向和别名

重定向

重定向也是通过 router 配置来完成，下面例子是从 /a 重定向到 /b：

const router = new VueRouter({
  routes: [
    { path: '/a', redirect: '/b' }
  ]
})
先捕获到所有路由在重定向到404路由上

别名

“重定向”的意思是，当用户访问 /a时，URL 将会被替换成 /b，然后匹配路由为 /b，那么“别名”又是什么呢？

/a 的别名是 /b，意味着，当用户访问 /b 时，URL 会保持为 /b，但是路由匹配则为 /a，就像用户访问 /a 一样。

const router = new VueRouter({
  routes: [
    { path: '/a', component: A, alias: '/b' }
  ]
})