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数据的刷新问题 ...
随机推荐
- 在CDN不能使用的时候加载自己服务器的资源
<script src="http://wlib.sinaapp.com/js/jquery/1.7.2/jquery.min.js"></script> ...
- 解决mysql和navicat乱码问题
1,首先进入mysql的my.ini文件,进行编码修改,全部改成utf8编码(这里就不赘述了,网上一搜一堆) 2,最重要的一点,把原先navicat创建的连接断开,重新创建新连接,在该新连接下创建库, ...
- window系统mysql安装后获取默认密码
未设置密码,获取默认密码方法 第一步:进去mysql根目录下,如果没有data文件夹可以新建一个,找不到my.ini文件也新建一个(在根目录下创建的my.ini,重新配置的参数会覆盖源文件的参数,所以 ...
- 杭电 1114 Piggy-Bank 完全背包问题
Piggy-Bank Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 65536/32768 K (Java/Others)Total ...
- Java面向对象编程 -3
this关键字 this可以算是Java里面比较复杂的关键字,因为this的使用形式约定了它的灵活性,在程序里面,使用this可以实现以下三类结构的描述: 当前类中的属性:this属性; 当前类中的方 ...
- 各大厂商发力5G新机,未来全球手机市场或将呈现新格局
随着5G商用将正式于今年开启落地,运营商和手机厂商都在为新一代网络制式积极做好准备.对于运营商来说,它们在不断增加5G基站的建设,让5G信号覆盖更广泛的范围.而对于手机厂商来说,它们在努力推出旗下的5 ...
- Write-up-Violator
关于 下载地址:点我 Flag:/root/flag.txt 哔哩哔哩:视频 信息收集 网卡:虚拟机vmnet8 ➜ ~ ip addr show dev vmnet8 5: vmnet8: < ...
- github日常的基本命令
git 常用命令 git clone 仓库地址 -从远端克隆项目 git pull -从远端拉取代码 git pull -p -从远端拉取代码和分支 提交代码流程: git add xxx -添加到暂 ...
- 模块学习--OS
1 返回当前目录信息 >>> os.getcwd() 'D:\\7_Python\\S14' 2 改变路径 >>> os.chdir('d:\\')#os.chdi ...
- (任意进制转换)将 r 进制数转成 k 进制数
我们知道任意进制转换为十进制,都是乘以基数的多少次方,然后相加: 十进制转换为任意进制,都是除以基数,然后倒着取余数: 所以这里是用十进制数中转,实现任意进制数的转换 #include<iost ...