Vue路由传参query和params两种方式

1、query传参

<router-link to="/page1?name='张三'">query</router-link>

直接在path后面加 ?参数，页面跳转的时候 参数会传过去

也可以换个写法：

<input @click="goQuery()" type="button" value="query">
goQuery(){
  this.$router.push({
    path:'/page1',
    query:{name:'张三'}
  })
},

 通过this.$router.push做路由跳转的话，query请求 使用的是path，url会显示参数，所以是get请求

2、params传参

<router-link to="/page2/'张三'">params</router-link>

 //同时在路由配置

{
  path: '/page2/:name',
  name: 'page2',
  component: page2
},

params传参 是在/后面直接加参数传参，/page2/'张三' 这样的url会直接映射到对应的路由，来达到传参的效果

也可以换个写法 ：

<input @click="goParams()" type="button" value="params">

goParams(){
  this.$router.push({
    name:'page2',
    params:{name:'张三2'}
  })
}

 通过this.$router.push做路由跳转的话，params使用的是name，并且url不会显示参数，所以是post请求