同一路由带参刷新,以及params和query两种方式传参的异同
同一路由应该不叫跳转了吧,就先叫刷新好了。
需求及问题
今天做web课设有这样一个需求:
在导航栏中一项叫做教师队伍一级菜单下,有三个二级菜单,分别为教授、副教授、讲师。这三个二级菜单分别对应一个页面。但是由于显示的排版相同,只是教师信息不同,故想用同一页面,通过选择不同的菜单,传入不同的参数,显示不同的信息。
刚开始的想法是,在实例创建阶段,也就是created阶段将导航栏传给子组件的参数获取到
父组件:
this.$router.push({path: '/jsjj',query:{id:index}})
子组件:
created(){this.id = this.$route.query.id;console.log(this.id);},
但是我错了。当第一次跳转复用路由时,created确实可以获取到父组件传递的值,但当带参数刷新当前路由时,created没有被调用。原因是组件已经被创建。
然后尝试了在 Vue 生命周期各个步骤,只有在创建前后,挂载前后可以获取到参数。同样,当路由刷新时又获取不到了。
这可怎么办。后来查阅了度娘,才想起来还有 Vue Router 导航守卫 这么个东西。导航即路由正在发生变化。(哎,还是代码敲得少)
文档中明确说到:
记住参数或查询的改变并不会触发进入/离开的导航守卫。你可以通过观察 $route 对象来应对这些变化,或使用 beforeRouteUpdate 的组件内守卫。
所以要用 beforeRouteUpdate 这个方法来获取当前刷新路由的参数:
beforeRouteUpdate(to, from, next){this.id = to.query.id;console.log(this.id);next();}
其中 next() 方法一定要加,否则路由跳转不会向下执行。
然后又遇到问题,只用 beforeRouteUpdate 方法,当第一次跳转到这个复用路由的时候,又获取不到参数了,原因是只有刷新路由时才会调用这个方法,当第一次进入到路由时不会调用这个方法,所以又获取不到。
那么在第一次跳转进来的时候再获取一下不就好了嘛~把我之前写的 created 方法和 beforeRouteUpdate 方法结合一下,大功告成!
Create(){this.id = this.$route.query.id;console.log('a');console.log(this.id);},beforeRouteUpdate(to, from, next){this.id = to.query.id;console.log('b');console.log(this.id);next();// this.id = this.$route.params.id;},
但是这样写总感觉有点难受,毕竟一个是 Vue 的生命周期函数,一个是 Vue Router 的类似钩子函数的函数。
然后发现其实也可以用 Vue Router 的 beforeRouteEnter 函数来实现 Created 里的功能。
解决办法
父组件:
this.$router.push({path: '/jsjj',query:{id:index}})
子组件:
beforeRouteEnter(to, from, next){console.log('g');console.log(to);console.log(to.query.id);next();},beforeRouteUpdate(to, from, next){this.id = to.query.id;console.log('b');console.log(this.id);next();},
其中还有个问题要注意,一定要使用 query 方式传参,params 方式传餐无效。
强迫症的我得到了解脱!
params 和 query 在路由传值的异同
query 要用 path 来引入,params 要用 name 来引入,接收参数都是类似的,分别是
this.$route.query.name
和this.$route.params.name。
this.$router.push({name:"detail", // 要对应router.js里面的name名称params:{name:'nameValue',code:10011}});// 获取参数 this.$route.params.namethis.$router.push({name:"/detail",query:{name:'nameValue',code:10011}});// 获取参数 this.$route.query.name
- query 更加类似于我们 ajax 中 get 传参,params 则类似于 post,说的再简单一点,前者在浏览器地址栏中显示参数,后者则不显示:
query:
params:
总结
- 在路由复用时,分为两个阶段,一个是进入此路由的阶段,也就是 beforeRouteEnter 阶段,另一个是更新路由的阶段,即 beforeRouteUpdate 阶段。
- 没有区分 Vue 和 Vue Router 的概念,导致在路由上的操作还停留在 Vue 生命周期上。
- 文档读的不够详细,其实现如今技术上碰到的问题,文档上基本都有写,以后遇事一定要多!看!文!档!!!
同一路由带参刷新,以及params和query两种方式传参的异同相关推荐
- vue 路由传参 params 与 query两种方式的区别(转载)
vue 路由传参 params 与 query两种方式的区别 初学vue的时候,不知道如何在方法中跳转界面并传参,百度过后,了解到两种方式,params 与 query.然后,错误就这么来了: ro ...
- vue 路由传参 params 与 query两种方式的区别
vue 路由传参 params 与 query两种方式的区别 初学vue的时候,不知道如何在方法中跳转界面并传参,百度过后,了解到两种方式,params 与 query.然后,错误就这么来了: ro ...
- vue中使用动态添加路由(router.addRoutes)加载权限侧边栏的两种方式
工作中我们经常会遇到这种需求,后台定义用户的权限数据,前端进行获取,并渲染在侧边栏导航上,不同权限的用户看到的侧边栏是不同的.即前端渲染的数据是随着后台的改变而改变的,做到真正的前后端分离. 一.拿到 ...
- vue路由传参的两种方式
项目场景: 例如:点击table表格第一列进入详情页,这时候我们进行路由跳转就需要携带一些参数以便我们在详情页使用 跳转方式 一般我们有两种方式让路由携带参数 1.路由传参query(path是路由地 ...
- 详解SpringCloud-gateway动态路由两种方式,以及路由加载过程
gateway配置路由主要有两种方式,一种是用yml配置文件,一种是写代码里,这两种方式都是不支持动态配置的.如: 下面就来看看gateway是如何加载这些配置信息的. 1 路由初始化 无论是yml还 ...
- python传递参数格式_Python语言学习基础篇之Python发送Post请求之根据参数位置传参、数据类型、不同方式传参...
本文主要介绍了Python语言学习基础篇之Python发送Post请求之根据参数位置传参.数据类型.不同方式传参,通过具体的内容向大家展现,希望对大家Python语言的学习有所帮助. 目录 一.验证 ...
- ajax的data传参的两种方式
ajax的data传参的两种方式 本文为转载. 1.[javascript] view plaincopy /** * 订单取消 * @return {Boolean} 处理是否成功 */ fun ...
- Vue实现动态路由的两种方式总结
实现动态路由有两种方式,一种是后端返回什么,前端就展示什么,另一种是后端只返回角色,前端根据角色拼接数据信息展示.相比第一种方式,第二种方式在企业中更常用. 第一种方式: (一)后端需返回类似Vue- ...
- python可变参数_Python 的四种共享传参详解
点击上方"Python数据之道",选择"星标公众号" 精品文章,第一时间送达 作者 | 杨仁聪 编辑 | Lemon 出品 | Python数据之道 本文来自公 ...
最新文章
- linux学习笔记一
- 产品经理对接第三方case,国内外4家公司联动落地项目
- ACL 2021 | SimCLS: 概念简单但足够有效的对比学习摘要生成框架
- apache日志轮转
- 求中位数中回文数之和C语言,一些算法题及答案
- Adobe After Effects CS6 操作记录
- Android adb “push pull”中文支持解决方案
- Atitit aes 加密法php实现
- JavaScript实现飞机大战小游戏
- c语言的异步回调函数,C语言函数的回调函数
- excel--操作使用记录
- 邓白氏编码的申请流程
- python实现模拟浏览器操作
- 无法完成操作,因为文件包含病毒或潜在的垃圾软件解决方案
- Lib Dll在VS2008下的编译和使用-持续更新,欢迎拍砖
- 【2019年秋PAT乙级考试】回顾 +题解+思路2019-9-8
- 为GET和POST请求添加请求参数和请求头
- 使用代理服务器爬取网站
- linux系统ps命令的参数a与-a表示的讨论
- 那些学长学姐考研期间,最后悔的事