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等方式存储数据参数
vue通过路由传值及在页面刷新后如何保存值的更多相关文章
- Vuex 页面刷新后store保存的数据会丢失 取cookie值
在store.js中 export default new vuex.Store({ // 首先声明一个状态 state state:{ pcid: '', postList: [], } //更新状 ...
- vue 使用localStorage解决vuex在页面刷新后数据被清除的问题
通常,我们在使用vue编写页面时,会需要使用vuex在组件间传递(或者说共同响应)同一个数据的变化.例如:用户的登录信息. 下面,我们使用传递用户登录信息的例子来一步步解决这个问题. 首先,我们的第一 ...
- 使用sessionStorage解决vuex在页面刷新后数据被清除的问题
https://www.jb51.net/article/138218.htm 1.原因 2.解决方法 localStorage没有时间期限,除非将它移除,sessionStorage即会话,当浏览器 ...
- Html 页面刷新后出现闪动
Html 页面刷新后,或跳转后,出现闪动,抖动问题 1.查看有没有用到新字体,新字体链接位置是否存在 如: @font-face { font-family: "AvantGarde-Dem ...
- Vue 动态路由传值
一.动态路由传值 1.配置动态路由: const routes = [ //动态路由路径参数以:开头 { path: '/Content/:aid', component:Content}, ] 2. ...
- 【vue】使用localStorage解决vuex在页面刷新后数据被清除的问题
通常,我们在使用vue编写页面时,会需要使用vuex在组件间传递(或者说共同响应)同一个数据的变化.例如:用户的登录信息. 下面,我们使用传递用户登录信息的例子来一步步解决这个问题. 首先,我们的第一 ...
- vue动态路由传值以及get传值及编程式导航
1.动态路由传值 1.配置路由处 { path: '/content/:id', component: Content }, // 动态路由 2.对应页面传值 <router-link :to= ...
- vue中常用的两中页面刷新的方式和页面回退
这个方法的参数是一个整数,意思是在 history 记录中向前或者后退多少步,类似 window.history.go(n) router.push(location) 想要导航到不同的 URL,则使 ...
- 解决vuex数据页面刷新后初始化问题
在vue项目的开发中经常会用到vuex来进行数据的存储,然而在开发过程中会出现刷新后页面的vuex的state数据初始化问题!下面是我用过的解决方法 利用storage缓存来实现vuex数据的刷新问题 ...
随机推荐
- DVWA实验之Brute Force(暴力破解)- High
DVWA实验之Brute Force(暴力破解)- High 有关DVWA环境搭建的教程请参考: https://www.cnblogs.com/0yst3r-2046/p/10928380.ht ...
- 2019牛客暑期多校训练营(第十场) Han Xin and His Troop (高精度+拓展中国剩余定理)
题意 裸题 思路 题中的模数之间并不互质,所以应该用拓展中国剩余定理. 但是交上去会炸,__int128过不了,所以用高精度的板子或者java大数都挺好过的. 这里推荐java大数,因为高精度板子用起 ...
- 杭电1003 最大子串(第二次AC) 当作DP的训练吧
Max Sum Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 65536/32768 K (Java/Others)Total Sub ...
- Keras入门——(7)长短期记忆网络LSTM(四)
数据准备:http://www.manythings.org/anki/cmn-eng.zip 源代码:https://github.com/pjgao/seq2seq_keras 参考:https: ...
- Pandas的Categorical Data类型
pandas从0.15版开始提供分类数据类型,用于表示统计学里有限且唯一性数据集,例如描述个人信息的性别一般就男和女两个数据常用'm'和'f'来描述,有时也能对应编码映射为0和1.血型A.B.O和AB ...
- vue.js ③
1.组件使用的细节点 H5编码中的规范是tr必须在tbody里所以不能直接套用<row></row>的写法,<ul>标签下支持<li>,select标签 ...
- 解决github访问慢和下载项目慢的问题
一.国内访问 GitHub 为什么很慢? GitHub的CDN域名遭到DNS污染,导致无法连接使用 GitHub 的加速分发服务器,才使得国内访问速度很慢. 二.如何解决 DNS 污染? 通过修改 ...
- 「AHOI2014/JSOI2014」拼图
「AHOI2014/JSOI2014」拼图 传送门 看到 \(n \times m \le 10^5\) ,考虑根号分治. 对于 \(n < m\) 的情况,我们可以枚举最终矩形的上下边界 \( ...
- 「JSOI2014」支线剧情2
「JSOI2014」支线剧情2 传送门 不难发现原图是一个以 \(1\) 为根的有根树,所以我们考虑树形 \(\text{DP}\). 设 \(f_i\) 表示暴力地走完以 \(i\) 为根的子树的最 ...
- Vagrant 安装使用
先安装虚拟机 https://www.virtualbox.org/ 再安装 https://www.vagrantup.com/ 1.nginxhttp://nginx.org/download/ ...