vue路由传参的三种基本方式

现有如下场景,点击父组件的li元素跳转到子组件中,并携带参数,便于子组件获取数据。
父组件中:

<li v-for="article in articles" @click="getDescribe(article.id)">

方案一:

getDescribe(id) {
//直接调用$router.push 实现携带参数的跳转
      this.$router.push({
      path: `/describe/${id}`,
})

方案一,需要对应路由配置如下:

{
     path: ‘/describe/:id‘,
     name: ‘Describe‘,
     component: Describe
   }

很显然,需要在path中添加/:id来对应 $router.push 中path携带的参数。在子组件中可以使用来获取传递的参数值。

this.$route.params.id

方案二:

父组件中:通过路由属性中的name来确定匹配的路由,通过params来传递参数。

this.$router.push({
    name: ‘Describe‘,
    params: {
        id: id
   }
})

对应路由配置: 注意这里不能使用:/id来传递参数了,因为父组件中,已经使用params来携带参数了。

{
     path: ‘/describe‘,
     name: ‘Describe‘,
     component: Describe
   }

子组件中: 这样来获取参数

this.$route.params.id

方案三:

父组件:使用path来匹配路由,然后通过query来传递参数
这种情况下 query传递的参数会显示在url后面?id=?

this.$router.push({
   path: ‘/describe‘,
   query: {
        id: id
   }
})

对应路由配置:

{
     path: ‘/describe‘,
     name: ‘Describe‘,
     component: Describe
   }

对应子组件: 这样来获取参数

this.$route.query.id

原文地址:https://www.cnblogs.com/lemonmonster/p/10269695.html

时间: 2024-11-08 15:24:04

vue路由传参的三种基本方式的相关文章

vue 路由传参的三种基本模式

路由是连接各个页面的桥梁,而参数在其中扮演者异常重要的角色,在一定意义上,决定着两座桥梁是否能够连接成功. 在vue路由中,支持3中传参方式. 场景,点击父组件的li元素跳转到子组件中,并携带参数,便于子组件获取对应li的数据,显示相应的正确的内容. 父组件中: <li v-for="article in articles" @click="getDescribe(article.id)"> 方案一: getDescribe(id) { // 直接调用$

Vue路由传参的几种方式

原 Vue路由传参的几种方式 2018年07月28日 23:52:40 广积粮缓称王 阅读数 12613 前言:顾名思义,vue路由传参是指嵌套路由时父路由向子路由传递参数,否则操作无效.传参方式可以划分为params传参和query传参,params传参又可以分为url中显示参数和不显示参数两种方式.具体区分和使用后续分析. 参考官网:https://router.vuejs.org/zh/guide/essentials/navigation.html params传参(url中显示参数)

vue路由传参页面刷新参数丢失问题解决方案

最近项目中涉及到跨页面传参数和后台进行数据交互,看到需求之后第一反应就是用路由传参来解决:Vue中给我们提供了三种路由传参方式,下面我们一个一个的来看一下: 方法一:params传参: this.$router.push({ name:"admin", //这里的params是一个对象,id是属性名,item.id是值(可以从当前组件或者Vue实例上直接取) params:{id:item.id} }) //这个组件对应的路由配置 { //组件路径 path: '/admin', //

Vue路由传参及传参后刷新导致参数消失处理

参考:https://blog.csdn.net/qq_43103581/article/details/82260073(vue 路由传递参数,刷新页面后参数丢失) 项目功能需要,要从列表页跳转到第三方提供的URL上(这里第三方页面我是通过iframe引入在详情页,目的是点击返回时可以通过keepAlive让列表页不刷新,如果不通过iframe直接跳第三方链接,那么返回必然会重新拉取数据),一路百度,刚开始使用 this.$router.push({name:'list', params:{i

vue路由传参问题

路由传参 带参的方式 第一种方式 通过 params 带参 刷新页面消失 this.$router.push({name:'name', params:{id: id}}) 这种方式传递过去的参数 刷新后容易消失 第二种方式 通过 query 带参   刷新页面不消失 this.$router.push({name:'name', query :{id: id}}) 原文地址:https://www.cnblogs.com/chz1905/p/11731177.html

vue路由传参

vue路由url 传参 :params 从客户列表页 通过路由跳转到客户详情页 查看客户详情时 需要将当前客户的id 和所属企业的id 当做参数传给后台. 在跳转时,将客户id 和企业id 通过路由传参 传给 客户详情页 客户列表: 客户详情 通过 this.$router.params 获取 参数 路由 router.js 路由传一个对象:query 有时我们需要传很多数据过去,为了避免大量拼接,我们可以传一个对象 通过this.$router.query接收对象参数 这里router 路由

第十篇:Vue路由传参

路由传参 用于组件与组件之间通过路由传递数据 通过url正则传递数据 i)设置 路由: path: '/goods/detail/:pk' | '/goods/:pk/detail/:xyz' 请求: '/goods/detail/任意字符' | '/goods/任意字符/detail/任意字符' ii)如何传 <router-link :to="`/goods/detail/${pk}`"></router-link> this.$router.push(`/

vue路由传参query和params的区别

1.用法 A.query要用path来引入(用name来引入也可以),接收参数都是this.$route.query.name. B.params要用name来引入,接收参数都是this.$route.params.name. 2.效果 A.query类似于ajax中get传参,即在浏览器地址栏中显示参数. B.params则类似于post,即在浏览器地址栏中不显示参数. 3.个人建议 在路由传参上建议使用params,以隐藏参数,做好安全保密.

vue路由传参query和params路由传参的区别?

相同点:router文件index.js 都是利用name属性. params传递时: params接收时利用this.$route.param进行接受: query路由传参: query接受利用this.$route.query 而展示上params路由传参像Ajax中post传参方式: query路由传参像get传参 原文地址:https://www.cnblogs.com/manban/p/12012567.html