VueRouter路由组件传参

通过params传递参数

 // 命名路由 userId不会出现在url上
 this.$router.push({ name: 'user', params: { userId: '123' }})
 
 // 获取传递的参数
 this.$route.params.userId

1. 只能使用name,不能使用path,因为使用path后params会被忽略
2. 参数不会显示在路径上
3. 浏览器强制刷新参数会被清空

注意：name的值是在router路由里定义的name值，而不是组件中定义的name值

通过query传递参数

 // 带查询参数，变成 /register?plan=private
 this.$router.push({name:'register',query:{ plan: 'private' }})

 // 带查询参数，变成 /register?plan=private
 this.$router.push({ path: '/register', query: { plan: 'private' }})
 
 // 获取参数
 this.$route.query.age
 this.$route.query.sex

1. 可以使用name，也可以使用path
2. 参数会显示在路径上
3. 浏览器强制刷新参数不会丢失

动态路由匹配

动态路径参数 以 : 冒号开头，如 { path: ‘/user/:id’, component: xxx }，使用动态路径参数可以达到动态路由匹配的效果
通过 /:id 的这种动态路由匹配时，当匹配到一个路由时，参数值通过 this.$route.params.id 获取到
当使用路由参数时，例如从 /user/foo 导航到 /user/bar，原来的组件实例会被复用。因为两个路由都渲染同个组件，比起销毁再创建，复用则显得更加高效。不过，这也意味着组件的生命周期钩子不会再被调用。
复用组件时，想对路由参数的变化作出响应的话，你可以简单地 watch (监测变化) $route 对象：

  watch: {
    '$route' (to, from) {
      // 对路由变化作出响应...
    }
  }

或者使用 2.2 中引入的 beforeRouteUpdate 导航守卫：

 beforeRouteUpdate (to, from, next) {
    // react to route changes...
    // don't forget to call next() 不要忘记调用next
  }

动态路径参数的跳转方法

如：{ path: ‘/user/:userId’, component: xxx }

1：命名路由跳转

 this.$router.push({name: 'user',params: { userId: 123, sex:'man' }})  //匹配为/user/123

注意： params中userId必须和上面路径中的 userId(/user/:userId)名一直，userId位置随意，还可以传递其他参数

2：带查询参数跳转

  this.$router.push({path: '/user/123',query: { sex: 'man' }}) //匹配为 /user/123?sex=max

注意： path路径格式和路由里定义的一样，:userId匹配123，同时路径上会添加sex=man属性

vue-router路由两种模式

hash模式

路径上带#，原理是监听了window.onhashchange事件，单页面应用使用时路由变化不会重新请求服务器，页面刷新时，#后边的路径不会发送给服务器，所以服务端不需要配置404页面

history模式

路径上不带#，这种模式充分利用 history.pushState API 来完成 URL 跳转而无须重新加载页面，但刷新页面时，整个路径都会请求到服务端，所以需要服务端配置404页面