vue router带参数页面刷新或回退参数消失的解决方法


Posted in Javascript onFebruary 27, 2019

写在前面:

传参是前端经常需要用的一个操作,很多场景都会需要用到上个页面的参数,本文将会详细介绍vue router 是如何进行传参的,以及一些小细节问题。有需要的朋友可以做一下参考,喜欢的可以点波赞,或者关注一下,希望可以帮到大家。

Vue router如何传参

params、query是什么?

params:/router1/:id ,/router1/123,/router1/789 ,这里的id叫做params

query:/router1?id=123 ,/router1?id=456 ,这里的id叫做query。

路由界面:

router.js:

路由设置这里,当你使用params方法传参的时候,要在路由后面加参数名,并且传参的时候,参数名要跟路由后面设置的参数名对应。使用query方法,就没有这种限制,直接在跳转里面用就可以。

vue router带参数页面刷新或回退参数消失的解决方法

注意:如果路由上面不写参数,也是可以传过去的,但不会在url上面显示出你的参数,并且当你跳到别的页面或者刷新页面的时候参数会丢失(如下图所示),那依赖这个参数的http请求或者其他操作就会失败。

vue router带参数页面刷新或回退参数消失的解决方法

注意看上面的路由参数,id这个参数是我们有设置在路由上面的,id2我没有设置在路由里面,所以刷新之后id2就不见了,在项目中,我们总不可能要求用户不能刷新吧。

组件1:

<template>
 <div class="app_page">
  <h1>从这个路由传参到别的路由</h1>
  <router-link :to="{ name:'router1',params: { id: status ,id2: status3},query: { queryId: status2 }}" >
   router-link跳转router1
  </router-link>
 </div>
</template>
<script>
export default {
 name: 'app_page',
 data () {
  return {
   status:110,
   status2:120,
   status3:119
  }
 },
}
</script>

编程式导航跳转:

上面的router-link传参,也可以使用router文档里面的编程式导航来跳转传参。

this.$router.push({ name:'router1',params: { id: status ,id2: status3},query: { queryId: status2 }});
//编程跳转写在一个函数里面,通过click等方法来触发

这两种传参效果是一模一样的,编程式导航,可以用来做判断跳转,比如是否授权,是否登录,等等状态,对此不太了解的小伙伴们,可以跳过这个编程式导航,以后再来看。

组件2:

<template>
 <div class="router1">
  <h1>接收参数的路由</h1>
  <h1> params.id:{{ $route.params }}</h1>
  <h1>query.status:{{ $route.query.queryId }}</h1>
  <keep-alive>
   <router-view></router-view>
  </keep-alive>
 </div>
</template>

传参还是比较简单的,按着上面组件的使用方法就可以成功传过去了。

提示:获取路由上面的参数,用的是$route,后面没有r。

params传参和query传参有什么区别:

vue router带参数页面刷新或回退参数消失的解决方法

1、params是路由的一部分,必须要有。query是拼接在url后面的参数,没有也没关系。

params一旦设置在路由,params就是路由的一部分,如果这个路由有params传参,但是在跳转的时候没有传这个参数,会导致跳转失败或者页面会没有内容。

比如:跳转/router1/:id

<router-link :to="{ name:'router1',params: { id: status}}" >正确</router-link>
<router-link :to="{ name:'router1',params: { id2: status}}">错误</router-link>

2、params、query不设置也可以传参,但是params不设置的时候,刷新页面或者返回参数会丢失,query并不会出现这种情况,这一点的在上面说过了

作者原话:首先我针对刷新参数消失想到的方法是在刚开始的时候将参数存到localStorage里面,但是如果这种传参比较多的话可能存储的地方会有点多;

然后再看一些博客的时候提到用vue 的<keep-alive>,即在<router-view>外套一层<keep-alive>实现页面缓存,但是这样确实是不是每一个页面都需要缓存的特别是一些状态之间切换需要流程化更改状态的页面,写上这个就不能实现数据的实时刷新了

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
类似GMAIL的Ajax信息反馈显示
Feb 16 Javascript
Javascript面向对象编程(二) 构造函数的继承
Aug 28 Javascript
jquery使用jxl插件导出excel示例
Apr 14 Javascript
javascript中的return和闭包函数浅析
Jun 06 Javascript
JavaScript原生xmlHttp与jquery的ajax方法json数据格式实例
Dec 04 Javascript
浅谈JavaScript的全局变量与局部变量
Jun 10 Javascript
Bootstrap Modal对话框如何在关闭时触发事件
Dec 02 Javascript
Node连接mysql数据库方法介绍
Feb 07 Javascript
JS模拟超市简易收银台小程序代码解析
Aug 18 Javascript
BootStrap给table表格的每一行添加一个按钮事件
Sep 07 Javascript
纯js代码生成可搜索选择下拉列表的实例
Jan 11 Javascript
使用 Vue cli 3.0 构建自定义组件库的方法
Apr 30 Javascript
react的滑动图片验证码组件的示例代码
Feb 27 #Javascript
原生JS forEach()和map()遍历的区别、兼容写法及jQuery $.each、$.map遍历操作
Feb 27 #jQuery
js/jquery遍历对象和数组的方法分析【forEach,map与each方法】
Feb 27 #jQuery
spring+angular实现导出excel的实现代码
Feb 27 #Javascript
react native 原生模块桥接的简单说明小结
Feb 26 #Javascript
JavaScript实现获取两个排序数组的中位数算法示例
Feb 26 #Javascript
小程序hover-class点击态效果实现
Feb 26 #Javascript
You might like
社区(php&amp;&amp;mysql)五
2006/10/09 PHP
php 采集书并合成txt格式的实现代码
2009/03/01 PHP
配置php.ini实现PHP文件上传功能
2014/11/27 PHP
WordPress中访客登陆实现邮件提醒的PHP脚本实例分享
2015/12/14 PHP
php和C#的yield迭代器实现方法对比分析
2019/07/17 PHP
Javascript学习笔记8 用JSON做原型
2010/01/11 Javascript
基于jquery的内容循环滚动小模块(仿新浪微博未登录首页滚动微博显示)
2011/03/28 Javascript
js判读浏览器是否支持html5的canvas的代码
2013/11/18 Javascript
转换字符串为json对象的方法详解
2013/11/29 Javascript
Jquery在指定DIV加载HTML示例代码
2014/02/17 Javascript
详解AngularJS中的表格使用
2015/06/16 Javascript
js实现商品抛物线加入购物车特效
2020/11/18 Javascript
基于chosen插件实现人员选择树搜索自动筛选功能
2016/09/24 Javascript
Angular2 PrimeNG分页模块学习
2017/01/14 Javascript
nodeJS微信分享
2017/12/20 NodeJs
全面介绍vue 全家桶和项目实例
2017/12/27 Javascript
JS基于for语句编写的九九乘法表示例
2018/01/04 Javascript
解决vue-cli脚手架打包后vendor文件过大的问题
2018/09/27 Javascript
JavaScript 格式化数字、金额、千分位、保留几位小数、舍入舍去
2019/07/23 Javascript
vue实现标签云效果的方法详解
2019/08/28 Javascript
jQuery鼠标滑过横向时间轴样式(代码详解)
2019/11/01 jQuery
django 自定义用户user模型的三种方法
2014/11/18 Python
Python实现的双色球生成功能示例
2017/12/18 Python
python多进程实现文件下载传输功能
2018/07/28 Python
详解Django的CSRF认证实现
2018/10/09 Python
详解pandas数据合并与重塑(pd.concat篇)
2019/07/09 Python
python logging通过json文件配置的步骤
2020/04/27 Python
《春笋》教学反思
2014/04/15 职场文书
管理标语大全
2014/06/24 职场文书
2015政治思想表现评语
2015/03/25 职场文书
教师节班会主持词
2015/07/06 职场文书
初中运动会前导词
2015/07/20 职场文书
HTML+CSS 实现顶部导航栏菜单制作
2021/06/03 HTML / CSS
SpringBoot 拦截器妙用你真的了解吗
2021/07/01 Java/Android
游戏《铁拳》动画化!2022年年内播出
2022/03/21 日漫
详解NumPy中的线性关系与数据修剪压缩
2022/05/25 Python