【Vue】路由传参方式

在使用params传递参数时，需要使用name来指定目标，否则会出现数据传输失败

vue的路由传参共有三种方式

1.query传参：不管使用path还是name来匹配路由都可以，然后通过query来传递参数，这种情况下 query传递的参数会显示在url（浏览器上看到的链接）后面

//使用标签
<router-link :to='{path:"test_path",query:{id:1}}'>传1</router-link>
<router-link :to='{path:"/test_path",query:{id:2}}'>传2</router-link>
<router-link :to='{name:"test_path",query:{id:3}}'>传3</router-link>//js
<button @click="btn1()">传1</button>
<button @click="btn2()">传2</button>btn1(){this.$router.push({path:'about',query:{id:1}})
},
btn2(){this.$router.push({name:'about',query:{id:2}})
},

2.params传参：通过路由属性中的name来确定匹配的路由，通过params来传递参数。

<!-- 传递params参数时，是通过指定路由名称进行传递的 -->
<router-link :to='{ name: "test_path", params: { id: 3 } }'>传3</router-link>//js
<button @click="btn2()">传2</button>
btn2(){this.$router.push({name:'test_path',params:{id:2}})
},

3.路径传参：直接通过path，直接携带参数进行路由传参，使用该方式传值的时候，需要子路由提前配置好参数，接收时也是通过this.$route.params.id获取

配置如下：

{path: '/test_path/:id',name: 'test_path',component: test_path
}

<router-link to='/test_path/1'>传1</router-link>//js
<button @click="btn1()">传1</button>
btn1(){this.$router.push({path:'/about/1'})},

【Vue】路由传参方式相关推荐

vue 路由传参 params 与 query两种方式的区别（转载）
vue 路由传参 params 与 query两种方式的区别初学vue的时候,不知道如何在方法中跳转界面并传参,百度过后,了解到两种方式,params 与 query.然后,错误就这么来了: ro ...
vue 路由传参 params 与 query两种方式的区别
vue 路由传参 params 与 query两种方式的区别初学vue的时候,不知道如何在方法中跳转界面并传参,百度过后,了解到两种方式,params 与 query.然后,错误就这么来了: ro ...
vue路由传参的三种方式/含页面刷新参数丢失解决方案(详细)
vue路由传参的三种方式以及页面刷新参数丢失问题一.路由传参的三种方式 1.传参方式一:params传参 2.传参方式二:路由属性配置传参 3.传参方式三:query传参二.三种传递方式的区别一 ...
详解vue路由传参的三种方式
在我们开发vue项目的时候,路由传参几乎是我们必须要用到的,一般出现场景是,当我们点击某个组件的某个按钮时跳转到另一个组件中,并携带参数,便于第二个组件获取数据.下面我就来说说vue路由传参的三种方式 ...
【vue】vue路由传参的三种方式
前言 vue 路由传参的使用场景一般都是应用在父路由跳转到子路由时,携带参数跳转.传参方式可划分为 params 传参和 query 传参,而 params 传参又可分为在 url 中显示参数和不显示 ...
Vue路由传参三种方式
Vue路由传参三种方式 params传参路由属性配置传参 query传参一.params传参 this.$router.push({ name:"admin", //这里的pa ...
Vue路由传参的几种方式
前言:顾名思义,vue路由传参是指嵌套路由时父路由向子路由传递参数,否则操作无效.传参方式可以划分为params传参和query传参,params传参又可以分为url中显示参数和不显示参数两种方式.具 ...
vue路由传参的四种方式
vue路由传参一.router-link路由导航父组件: 使用<router-link to = "/跳转路径/传入的参数"></router-link> ...
vue路由+ elementUI表格组件：loop文章列表页enter内容页（vue路由传参userid）- 代码篇
elementUI表格组件,response.data.newsLists列表如何循环出来?如何点击传参numId,并进入对应的内容页? 本文意图: 使用官方table组件:实现API调用:文章遍历. ...
Vue路由传参params 与 query
一.路由传参分为 params 传参与 query 传参 1. params params 传参类似于网络请求中的 post 请求,params 传过去的参数不会显示在地址栏中(但是不能刷新).par ...

【Vue】路由传参方式

【Vue】路由传参方式相关推荐

最新文章

热门文章