项目场景：

例如：点击table表格第一列进入详情页，这时候我们进行路由跳转就需要携带一些参数以便我们在详情页使用

跳转方式

一般我们有两种方式让路由携带参数

1.路由传参query(path是路由地址，query是需要传递的参数)

goDetail() {this.$router.push({path: "/publish",query: {roleName: "admin",id: 1,},});},

注意：如果传入的参数存在对象，则必须转成JSON字符串传入，接收的时候再转换

goDetail() {let arr = [{name:"admin",value:111},{name:"admin2",value:222}]this.$router.push({path: "/publish",query: {roleName: JSON.stringify(arr),id: 1,},});},

2.路由传参params（name与路由的name对应，params是需要传递的参数）

goDetail() {this.$router.push({name: "publish",params: {roleName: "admin",id: 1,},});},

注意：params传参刷新页面的时候会丢失数据，解决方法是在路由的配置文件里给该路由后面拼接需要的参数

{path: "/Publish/:roleName/:id",//:roleName与:id之间的/可以省略，看自己喜好name: "publish",component:import("../components/PublishApp"),
},

接收路由参数：

1.query的接收方式：

//参数不存在对象时
created() {console.log(this.$route.query)},
//参数存在对象时,只能单独取，直接打印query报错
created() {console.log(JSON.parse(this.$route.query.roleName));},

2.params的接收方式：

 created() {console.log(this.$route.params);},

注意：

1.query相当于get请求，页面跳转的时候，可以在地址栏看到请求参数，而params相当于post请求，参数不会再地址栏中显示;
2.如果用params又不想刷新后丢失参数，只能拼在路由path后面；
3.个人觉得用params把参数拼在路由后面比query好看很多；
4.params想携带数组对象这些类型的数据，又不想刷新后丢失，我没找到解决办法，还是用query，有没有大神知道告诉我一下谢谢！！！

vue路由传参的两种方式相关推荐

vue 如何将参数放到连接上_通过Vue路由传参的两种方式及Vue组件中接收参数的方式...
1. Vue传参方式 1.1 通过动态路由传参我们经常需要把某种模式匹配到的所有路由,全都映射到同个组件.例如,我们有一个 User 组件,对于所有 ID 各不相同的用户,都要使用这个组件来渲染.那 ...
vue路由传参的三种方式/含页面刷新参数丢失解决方案(详细)
vue路由传参的三种方式以及页面刷新参数丢失问题一.路由传参的三种方式 1.传参方式一:params传参 2.传参方式二:路由属性配置传参 3.传参方式三:query传参二.三种传递方式的区别一 ...
【vue】vue路由传参的三种方式
前言 vue 路由传参的使用场景一般都是应用在父路由跳转到子路由时,携带参数跳转.传参方式可划分为 params 传参和 query 传参,而 params 传参又可分为在 url 中显示参数和不显示 ...
详解vue路由传参的三种方式
在我们开发vue项目的时候,路由传参几乎是我们必须要用到的,一般出现场景是,当我们点击某个组件的某个按钮时跳转到另一个组件中,并携带参数,便于第二个组件获取数据.下面我就来说说vue路由传参的三种方式 ...
Vue路由传参的几种方式
前言:顾名思义,vue路由传参是指嵌套路由时父路由向子路由传递参数,否则操作无效.传参方式可以划分为params传参和query传参,params传参又可以分为url中显示参数和不显示参数两种方式.具 ...
vue路由传参的四种方式
vue路由传参一.router-link路由导航父组件: 使用<router-link to = "/跳转路径/传入的参数"></router-link> ...
vue路由传参的三种方式
目录 1.动态路由传参 2.params传参 3.query传参 1.动态路由传参使用"路径参数"使用冒号 : 标记.当匹配到一个路由时,参数值会被设置到 this.$route ...
vue 路由传参的8种方式转
编程式路由传参除了使用创建 a 标签来定义导航链接,我们还可以借助 router 的实例方法,通过编写代码来实现. 1. 通过 params 传递路由配置路径参数用冒号 : 表示. cons ...
vue路由传参的三种方式区别（params,query）
最近在做一个项目涉及到列表到详情页的参数的传递,网上搜索一下路由传参,结合自己的写法找到一种适合自己的,不过也对三种写法都有了了解,在此记录一下 1 <ul class="table_ ...

vue路由传参的两种方式

项目场景：

跳转方式

接收路由参数：

注意：

vue路由传参的两种方式相关推荐

最新文章

热门文章