vue-router中 query传参和params传参的使用和区别讲解

 更新时间:2024年01月17日 11:18:31   作者:alokka  
这篇文章主要介绍了vue-router中 query传参和params传参的使用和区别讲解,本文结合示例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友参考下吧

时隔一年,发现自己回来看自己写的文档都看得云里雾里,这次我在重新改善下这篇文章,希望这篇文章能给大家一些帮助
-2019/12/26

1.query传参:

1.query传参
路由:

    var router = new VueRouter({
      routes: [
        { path: '/login', component: login },
        { name:'register',path: '/register', component: register } 
      ]
    })

导航:

// 注意:这是 query 两种传参方式 一种是直接跳转把字符串传过去 一种是传描述目标位置的对象
    <router-link to="/login?id=10&name=zs">登录</router-link>
    <router-link :to="{path:'/register',query:{id:5,name:'lili'}}">注册</router-link>
    或
    <router-link :to="{name:'register',query:{id:5,name:'lili'}}">注册</router-link>
等同于:
	this.$router.push('/login?id=10&name=zs')
	this.$router.push({path:'/register',query:{id:5,name:'lili'}})
	或
	this.$router.push({name:'register',query:{id:5,name:'lili'}})

注意:jquery可以通过name或path来引入路由

2.params传参

2.params传参
路由:

    var router = new VueRouter({
      routes: [
        { path: '/login/:id/:name', component: login },// 这里不传入对应的参数(:/id/:name) 刷新页面 参数会消失,页面中就丢失了数据
        { name:'register', path: '/register/:id/:name', component: register }
      ]
    })

导航:

// 注意:这是 params 两种传参方式 一种是直接跳转把字符串传过去 一种是传描述目标位置的对象
    <router-link to="/login/12/ls">登录</router-link>
    <router-link :to="{name:'register',params:{id:10,name:'lili'}}">注册</router-link>
等同于:
	this.$router.push('/login/12/ls')
	this.$router.push({name:'register',params:{id:10,name:'lili'}})

注意:params只能通过name来引入路由,path会undefined

jquery传参和params传参的区别

1.用法上:

  • 上文已经提到query可以用name或path来引入
  • params必需要用name来引入,接收参数都是类似的,分别是:

this.$route.query.namethis.$route.params.name

2.地址栏表现形式上:
query:

params:

注意:这里的12和ls 对应的是/:id/:name 这两个参数可以不写 那么就不会在地址栏上显示 不过刷新页面参数会消失 写上参数刷新页面 参数不会消失

到此这篇关于vue-router中 query传参和params传参的使用和区别的文章就介绍到这了,更多相关vue-router query和params传参内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • vue使用canvas画布实现平面图点位标注功能(最新推荐)

    vue使用canvas画布实现平面图点位标注功能(最新推荐)

    这篇文章主要介绍了vue使用canvas画布实现平面图点位标注功能,经过本文一番研究发现canvas标签可以完成很多功能,电子签名,点位标注,问题标注,画图功能,感兴趣的朋友跟随小编一起看看吧
    2023-07-07
  • Vue实现购物车的全选、单选、显示商品价格代码实例

    Vue实现购物车的全选、单选、显示商品价格代码实例

    这篇文章主要介绍了Vue实现购物车的全选、单选、显示商品价格实例,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-05-05
  • Vue首屏加载过慢的优化方法

    Vue首屏加载过慢的优化方法

    Vue 应用在首屏加载时速度过慢,通常与以下问题有关:打包文件过大、网络请求过多、资源加载过慢,针对这些问题,本文给大家介绍了Vue首屏加载过慢的优化方法,需要的朋友可以参考下
    2025-01-01
  • idea部署RuoYi-Vue分离版的图文详解

    idea部署RuoYi-Vue分离版的图文详解

    RuoYi-Vue是一款基于SpringBoot+Vue的前后端分离极速后台开发框架, 本文主要介绍了idea部署RuoYi-Vue分离版的图文详解,具有一定的参考价值,感兴趣的可以了解一下
    2024-06-06
  • 一文带你搞懂Vue3.5的响应式重构

    一文带你搞懂Vue3.5的响应式重构

    在Vue3.5版本中最大的改动就是响应式重构,重构后性能竟然炸裂的提升了56%,本文我们来讲讲使用双向链表后,Vue内部是如何实现依赖收集和依赖触发的,感兴趣的可以了解下
    2024-11-11
  • vue中el-message的封装使用

    vue中el-message的封装使用

    本文主要介绍了vue中el-message的封装使用,文中通过示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2022-02-02
  • 详解VUE Element-UI多级菜单动态渲染的组件

    详解VUE Element-UI多级菜单动态渲染的组件

    这篇文章主要介绍了VUE Element-UI多级菜单动态渲染的组件,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-04-04
  • 前端报错npm ERR! cb() never called!问题解决办法

    前端报错npm ERR! cb() never called!问题解决办法

    最近接手了一个前台项目,执行npm install的时候一直报错,所以这里就给大家总结下,这篇文章主要给给大家介绍了关于前端报错npm ERR! cb() never called!问题的解决办法,需要的朋友可以参考下
    2024-05-05
  • 详解Vue中一种简易路由传参办法

    详解Vue中一种简易路由传参办法

    本篇文章主要介绍了详解Vue中一种简易路由传参办法,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-09-09
  • Vue3中reactive函数toRef函数ref函数简介

    Vue3中reactive函数toRef函数ref函数简介

    这篇文章主要介绍了Vue3中的三种函数,分别对reactive函数toRef函数以及ref函数原理及使用作了简单介绍,有需要的朋友可以借鉴参考下
    2021-09-09

最新评论