vue路由传参

vue路由传参

params传参

vue传参方法一

//路由上配置要传递参数
<router-link :to="'/about/'+item.id">点击跳转页面</router-link>

1.路由定义配置

{
      path: "/about/:id",
      name: "about",
      component: About
    },

2.使用方法

// 直接调用$router.push 实现携带参数的跳转
this.$router.push({
// 这个id是一个变量,随便是什么值都可以
 path: /about/${id}`,
 })

3.获取数据（在about页面）

//需要传递的参数
  $route.params.id

vue传参方法二
1.路由配置

{
   path: "/about",
   name: "about",
   component: About
 }

2使用方法
父组件中：通过路由属性中的name来确定匹配的路由，通过params来传递参数。

this.$router.push({
 name: 'about',
 params: {
 id: id
 }
})

3. 获取方法（在about页面）

$route.params.id

query传参

vue传参方法三

//路由上配置要传递参数
<router-link :to="{name:'about',query:{id:item.id}}">点击跳转页面</router-link>

1.路由配置

{
 path: "/about",
 name: "about",
 component: About
}

2使用方法

this.$router.push({
   path: '/about',
   //params换成了query
   query: {
   id: id
   }
  })

3 获取方法（在about页面）

$route.query.id

区别

（1）
query传参是在url地址后面用?进行分割 参数名和参数值之间用=，多个参数用&；跟前面用的params获取的区别在于，用query获取的id值会在url中有显示，可以看到你传过来的值
params传参的时候参数在页面刷新之后不会保存(除非你在路由配置的时候通过“：”参数名的形式在路由的path中进行指定)

（2）注意接收参数的时候，是route而不是router！
query更加类似于我们ajax中get传参，params则类似于post

query:

params:

参考：https://www.cnblogs.com/beka/p/8583924.html