vue路由传参方式

最新推荐文章于 2023-12-15 15:48:47 发布

Lemon今天学习了吗

最新推荐文章于 2023-12-15 15:48:47 发布

阅读量180

点赞数 1

分类专栏： vue 文章标签： vue.js elementui javascript

本文链接：https://blog.csdn.net/weixin_47978760/article/details/125327744

版权

vue 专栏收录该内容

49 篇文章 1 订阅

订阅专栏

本文详细介绍了Vue Router中的参数传递方式，包括router-link的query和params传递，以及name方式的使用。通过示例展示了如何在路径中显示或隐藏参数，以及刷新页面时参数是否丢失的情况。对于query传参，无论path还是name方式，参数在地址栏可见且刷新不丢失；而params+name方式下，路径不显示参数，但刷新后参数会丢失。

摘要由CSDN通过智能技术生成

一、方式区分

router-link形式传参（在路径中显示参数，刷新页面参数不丢失）；
params和query传参都可以用name方式；
query传参还可以用path方式；
path跳转会在地址栏url中显示参数，刷新页面参数不丢失（相当于get 明文传输）；
params + name跳转不会在路径中显示参数，刷新页面参数丢失（相当于 post 隐示传输）；

二、实例

1、router-link传递方式

//1、router-link传递方式
// 形式1 query传参
<router-link :to="{path:'/path',query:{id:'1'}}"><router-link>
<router-link :to="/path?id=1"><router-link>
// 形式2  在path后面跟对应的值
path:'/path/:id'
<router-link :to="`/path/${id}`"><router-link>


//子页面获取参数
$route.query.name
 
//路径显示，刷新页面，参数不丢失
/path?id=123

2、params + name 传递方式：参数丢失

2、params + name匹配路由
//配置路由中的name
name:'details-lemon'

//传递方式，通过name匹配路由
this.$router.push({
  name: "details-lemon", //路由配置中的name
  params:{
    id:222
  }
});
 
//获取参数
$route.query.name
 
//传递后形成的路径，刷新页面，参数丢失
/path

3、query 传递方式

//1、传递方式：query + path匹配路由
this.$router.push({
  path:'/path',
  query: {
    id:'1'
  }
})
 
//获取参数
$route.query.name
 
//路径显示，刷新页面，参数不丢失
/path?id=1

--------------------------------------------------------------------

2、传递方式：query + name匹配路由
this.$router.push({
  name:'details-lemon',//路由配置中的name
  query: {
    id:'1'
  }
})
 
//获取参数
$route.query.name
 
//路径显示，刷新页面，参数不丢失
/path?id=1