Vue路由传参数方法总结

欢迎加我技术交流QQ群 ：811956471

前言：前端的东西零碎、广泛，需要我们不断的去总结归纳，所以就这块做了一些总结，欢迎大家继续补充纠正。

特别注意：

1、path匹配路由传参只能用query去接收参数；
2、name匹配路由，params和query两者皆可，用哪个携带参数就用用哪个区接收；
3、query传参数会出现在地址栏，刷新当前页面参数不会丢失；
4、params传参不会在地址栏，刷新页面参数会丢失。

方法一：使用name来匹配路由，name匹配的是路由里面的name值。

// 路由
routes: [
    {
      path: '/',
      name: 'Hello',
      component: Hello
    }
]
//跳转方法：
 this.$router.push({
     name: "Hello",
     params: {name:'诸葛亮'}
    // or：
     query: {name:'诸葛亮'}
});
//在相应路由里接收 :
 console.log(this.$route.params.name) // 诸葛亮
 // or :
 console.log(this.$route.query.name) // 诸葛亮

方法二：使用path来匹配路由，path匹配的是路由里面的path值、只能通过query来传递参数,

routes: [
    {
      path: '/',
      name: 'Hello',
      component: Hello
    }
]
//跳转方法：
 this.$router.push({
     path: "/",
     query: {name:'诸葛亮'},
});
在相应路由里接收 :console.log(this.$route.query.name) // 诸葛亮

方法三：动态路由传参数

如果原来组件被复用。此时组件的生命周期钩子不会再被调用。
可以用这样监听路由变化：

watch: {
    $route(to, from) {
      // 对路由变化作出响应...
    }
  }
//也可以：
beforeRouteUpdate(to, from, next) {
   // 对路由变化作出响应...
   next()
 }

// 基本语法：
// 路由：
const router = new VueRouter({
  routes: [
    // 动态路径参数；newsId、newsTitle
    { path:'/params/:newsId/:newsTitle',component:newPagw }
  ]
})
//声明式：
params
//编程式：
 toInfo(newsId,newsTitle) {
     this.$router.push(`/info/${newsId}/${newsTitle}`);
  },

方法五：直接再跳转路径后面拼接参数，相当于query方法

示例： 
在相应路由里接收 :console.log(this.$route.query.a)