vue通过路由传值及在页面刷新后如何保存值

1、普通的路由跳转

方式一:通过routerLinkTo方式,转为a标签的跳转,to里面相当于a标签的href路径
如下:

方式二:通过this.$router.push方式:
如下:

2、带参数的路由跳转

通过动态参数:通过这种方式传递的参数在刷新后不会消失,但会显示在url路径上
router设置如下:

跳转方式:

接收路由参数方式:

通过params和query等方式:query和path为一个组合,params和name为一个组合,不同之处在于query方式会显示在url上,而params不会
发送:

接收:

3、页面接收参数后刷新,如何保存路由参数

一、通过query和动态参数之类的在url上显示的在页面刷新后,参数不会消失
二、通过session和localstorage等方式存储数据参数

原文地址:https://www.cnblogs.com/Zxq-zn/p/12244006.html

时间: 2024-08-10 09:14:50

vue通过路由传值及在页面刷新后如何保存值的相关文章

使用sessionStorage解决vuex在页面刷新后数据被清除的问题

https://www.jb51.net/article/138218.htm 1.原因 2.解决方法 localStorage没有时间期限,除非将它移除,sessionStorage即会话,当浏览器关闭时会话结束,有时间期限,具有自行百度 我这里使用sessionStorage,这里需要注意的是vuex中的变量是响应式的,而sessionStorage不是,当你改变vuex中的状态,组件会检测到改变,而sessionStorage就不会了,页面要重新刷新才可以看到改变,所以应让vuex中的状态

页面刷新后让其回到滚动条原来的位置

设计一个刷新时记录滚动条位置的隐藏域: <ul class="pos-scroll btdatalist" id="bertList"> </ul> <input id="divScrollValue" type="hidden" value="0" /> js: function getSectionBaseInfo(){ //刷新后回到原来的滚动条位置document

Vue 路由跳转传递参数,子组件页面刷新后数据不丢失

原文地址:https://www.cnblogs.com/yscec/p/12408492.html

解决vue单页面刷新后vuex中数据恢复初始值的问题

思路是页面关闭前将state的数据存储到浏览器缓存里,页面加载时再取出来存到state中 //App.vue created () { if (this.$getLocal("store")) { this.$store.replaceState( Object.assign({}, this.$store.state, this.$getLocal("store", "parse")) ); } window.addEventListener(

ASP.Net页面刷新后自动滚动到原来位置

在网上搜索之后总结了三种方式: 1.设置Page中的MaintainScrollPositionOnPostback属性为true A>.页面里有MaintainScrollPositionOnPostback,默认是false,设为true即可(页面级) <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" MaintainScrollP

C# 中解决页面刷新后字体等变大问题

来源:http://blog.csdn.net/wcsjsdn/article/details/5109605 我们在.net开发中时常会遇到一个问题,那就是,当点击某个按钮后,调用js语句,当点击"确定"后,会发现页面的css样式表丢失,页面的框架不正常. 那么,我们用什么样的代码能让他既有js的效果语句,又不影响页面的基本框架啦,这句需要用到页面注册的知识:RegisterClientScriptBlock或RegisterStartupScript,这两个的效果一下,唯一区别是:

JSP中页面刷新后保留文本输入框的值

原本我想按照记忆中ASP的什么回调方法来做的,看了看网上的还是这样做方便多了: <input type="text" name="sname" value="${sname}"/> 看来还是处处都需要学习啊!

jsp页面刷新后保留文本输入框和下拉框的值

保留下拉框 <select name="status">     <option value="all" <c:if test="${status eq 'all'}">selected</c:if>>状态</option>     <option value="notstart" <c:if test="${status == 'notstar

a标签点击页面刷新但还保存当前点击的class是激活的状态

$(".shop-list1").find("li").each(function(){            var href=$(this).attr("hrefs");            var hd1 = window.location.pathname;             var hd2 = window.location.search;             var href1=hd1+hd2;            va