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数据的刷新问题 ...
随机推荐
- 《掌握融资必备知识》---创业学习---训练营第一课---HHR---
一,<开始学习> 1,四个思考题: (1)从你决定开始融资,到你拿到钱,你都需要经历哪些环节? (2)你知道投资机构内部的工作流程吗? (3)融资最好的时机是什么时候? (4)创投圈的专业 ...
- Robot Framework 使用【1】-- 基于Python3.7 + RIDE 最新版本搭建
前言 Robot Framework作为公司能快速落地实现UI自动化测试的一款框架,同时也非常适合刚入门自动化测试的朋友们去快速学习自动化,笔者计划通过从搭建逐步到完成自动化测试的过程来整体描述它的使 ...
- 结对编程任意Android App Demo
一.产品说明 1.编写目的:用于获取百度图标. 2.情景设计:本产品用于展示图标.随着21世纪各类元素的普及,大部分的人群想下载各类网站的图标,也为了方便用户更便捷的下载而开发的. 3.Demo主要实 ...
- 编译安装nginx错误解决!
编译安装执行 ./configure --prefix=/root/web/nginx --sbin-path=/root/web/nginx/sbin/nginx --conf-path=/root ...
- Jquery练习1
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8&quo ...
- 「JSOI2014」学生选课
「JSOI2014」学生选课 传送门 看到这题首先可以二分. 考虑对于当前的 \(mid\) 如何 \(\text{check}\) 我们用 \(f_{i,j}\) 来表示 \(i\) 对 \(j\) ...
- RuntimeError: cuda runtime error (10) : invalid device ordinal
This is caused by the unmatching of gpu device number when loading a saved model. torch.load('my_fil ...
- 小程序使用scroll-view横向滑动时,flex布局失效问题
最近在完善以前项目,类目增多,需要进行横向滑动 实现方法1 可以在外盒子scroll-view使用white-space: nowrap来禁止子盒子换行,子盒子使用display: inline-bl ...
- 笔记-AJAX
笔记-AJAX 1. 简介 Ajax 即“Asynchronous Javascript And XML”(异步 JavaScript 和 XML AJAX 是一种用于创建快速动态网页的技术 ...
- PAT T1012 Greedy Snake
直接暴力枚举,注意每次深搜完状态的还原~ #include<bits/stdc++.h> using namespace std; ; int visit[maxn][maxn]; int ...