vue router带参数页面刷新或者回退参数消失的解决方法
写在前面:
传参是前端经常需要用的一个操作,很多场景都会需要用到上个页面的参数,本文将会详细介绍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方法,就没有这种限制,直接在跳转里面用就可以。
注意:如果路由上面不写参数,也是可以传过去的,但不会在url上面显示出你的参数,并且当你跳到别的页面或者刷新页面的时候参数会丢失(如下图所示),那依赖这个参数的http请求或者其他操作就会失败。
注意看上面的路由参数,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>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
编程式导航跳转:
上面的router-link传参,也可以使用router文档里面的编程式导航来跳转传参。
-
this.$router.push({ name:'router1',params: { id: status ,id2: status3},query: { queryId: status2 }});
-
//编程跳转写在一个函数里面,通过click等方法来触发
- 1
- 2
- 3
这两种传参效果是一模一样的,编程式导航,可以用来做判断跳转,比如是否授权,是否登录,等等状态,对此不太了解的小伙伴们,可以跳过这个编程式导航,以后再来看。
组件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>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
传参还是比较简单的,按着上面组件的使用方法就可以成功传过去了。
提示:获取路由上面的参数,用的是$route,后面没有r。
params传参和query传参有什么区别:
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>
- 1
- 2
- 3
2、params、query不设置也可以传参,但是params不设置的时候,刷新页面或者返回参数会丢失,query并不会出现这种情况,这一点的在上面说过了
作者原话:首先我针对刷新参数消失想到的方法是在刚开始的时候将参数存到localStorage里面,但是如果这种传参比较多的话可能存储的地方会有点多;
然后再看一些博客的时候提到用vue 的<keep-alive>,即在<router-view>外套一层<keep-alive>实现页面缓存,但是这样确实是不是每一个页面都需要缓存的特别是一些状态之间切换需要流程化更改状态的页面,写上这个就不能实现数据的实时刷新了
阅读更多- vue-router路由参数刷新消失的问题解决方法
- 【操作系统】chrome插件无法安装解决方法或者提示“将该项添加到 Chrome 浏览器时出错。请刷新此页面,然后重试。”的解决办法
- JS实现网页开窗刷新 GeT传递参数成功 远程打开页面失败的解决方法
- 解决vue页面刷新或者后退参数丢失的问题
- JavaScript页面刷新与弹出窗口问题解决方法
- Android 5.0以上加slidingmenu后页面不刷新解决方法
- 解决页面刷新或代码更新后无反应的方法
- vue router嵌套路由在history模式下刷新无法渲染页面问题的解决方法
- JavaScript页面刷新与弹出窗口问题解决方法
- .net 地址栏传中文乱码 的解决方法 (如果查看的图片或视频为中文名,页面无法查看图片或者视频)也是如此方法
- Vue用router.push(传参)跳转页面,参数改变,跳转页面数据不刷新的解决办法
- 前台页面utf-8,通过url传中文参数的解决方法
- Android popupwindow 失去焦点或者点击空白区域时消失的解决方法
- ASP.Net Core 2.0 + Angular5 SPA程序刷新后找不到页面解决方法
- javascript通过url向jsp页面传递中文参数乱码解决方法
- linux环境配置nginx导致页面不刷新的解决方法
- ASP.NET防止页面刷新的两种解决方法小结
- liferay portal + nginx 公告、留言板或者文档中心添加完成后,不会返回上一页面的解决方法
- 关于在FireFox 3.0 中showModalDialog的页面刷新window.dialogArguments引用丢失的解决方法
- vue A页面路由跳转到B页面,在B页面刷新会返回A页面,怎么样用sessionstorage存储使其留在B页面,或者有别的方法吗