Vue路由传参数方法总结

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

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

特别注意：path匹配路由传参只能用query去接收参数，name来匹配路由只能用params去接收参数

方法一：用name传递参数

routes: [
    {
      path: '/',
      name: 'Hello',
      component: Hello
    }
]
在相应路由里接收 :console.log(this.$route.name) // Hello

方法二：使用name来匹配路由，然后通过params来接收参数

基本语法：

<router-link :to="{name:xxx,params:{key:value}}">valueString</router-link>
示例：<router-link :to="{name:'Home',params:{username:'jspang',id:'555'}}"></router-link>
在相应路由里接收 :console.log(this.$route.params) // {username: "jspang", id: "555"}

方法三：使用path来匹配路由，然后通过query来接收参数 方法同：name来匹配路由传参

示例：<router-link :to="{path:'/Home',query:{username:'jspang',id:'555'}}"></router-link>
在相应路由里接收 :console.log(this.$route.query) // {username: "jspang", id: "555"}

方法四：利用url传递参数----在配置文件里以冒号的形式设置参数。

基本语法：
示例：{
    path:'/params/:newsId/:newsTitle',
    component:Params
}
<router-link to="/params/198/jspang website is very good">params</router-link>

方法五：直接再跳转路径后面拼接参数

示例： <router-link to="/GoodsInfo?a=1"></router-link>
在相应路由里接收 :console.log(this.$route.query.a)