Vue 参数传递及刷新后依旧存在
获取参数方式有两种:
1、params
2、query 第一种方式: params
this.$router.push({name:'Hello',params:{name:'zs',age:'22'}});
name:组件中的命名
params 中两个参数分别为name,age 跳转 hello这个组件,获取参数值:
var name = this.$route.params.name;
var age = this.$route.params.age;
这样就会获取到相应参数 浏览器地址为
http://localhost:8080/#/hello/
问题来了 ,刷新参数不见了如何解决往下看 在router路由中有个path
.....
{
path:'/hello/:name/:age',
name:'Hello',
component: Hello
}
这里要使用 /:name 如果有多个可以这样 /:name/:age/.......
这是浏览器 显示
http://localhost:8080/#/hello/zs/22
zs ,22就是值。
第二种方法:
query
跳转URL携带参数
this.$router.push({name:'Hello',query:{name:'zs',age:'22'}});
在组件中获取
var name= this.$route.query.name;
var age = this.$route.query.age;
浏览器会显示
http://localhost:8080/#/?name=zs&age=22
两种方式都可以解决刷新参数不见问题。
Vue 参数传递及刷新后依旧存在的更多相关文章
- vue路由\导航刷新后:ative\localStorage\url截取参数
<el-menu :default-active="$route.path" router mode="horizontal"> <el-me ...
- vue 使用localStorage解决vuex在页面刷新后数据被清除的问题
通常,我们在使用vue编写页面时,会需要使用vuex在组件间传递(或者说共同响应)同一个数据的变化.例如:用户的登录信息. 下面,我们使用传递用户登录信息的例子来一步步解决这个问题. 首先,我们的第一 ...
- 【vue】使用localStorage解决vuex在页面刷新后数据被清除的问题
通常,我们在使用vue编写页面时,会需要使用vuex在组件间传递(或者说共同响应)同一个数据的变化.例如:用户的登录信息. 下面,我们使用传递用户登录信息的例子来一步步解决这个问题. 首先,我们的第一 ...
- 解决vue路由history模式刷新后404的问题
server { listen ;#默认端口是80,如果端口没被占用可以不用修改 server_name localhost; root E:/vue/my_project/dist;#vue项目的打 ...
- vue错误提示 Cannot read property 'beforeRouteEnter' of undefined,刷新后跳到首页
vue错误提示 Cannot read property 'beforeRouteEnter' of undefined,刷新后跳到首页 因为vue-router版本太高了,我vue用的是2.3.4, ...
- vue 首次加载缓慢/刷新后加载缓慢 原因及解决方案
# vue 首次加载缓慢/刷新后加载缓慢 原因及解决方案 最近做项目发现一个问题,页面每次刷新后加载速度都非常慢,20s左右,在开发环境则非常流畅,几乎感觉不到,本文参考望山的各种方案优化 1,关闭打 ...
- vue案例 - vuex+sessionstorage解决vue项目刷新后页面空白/数据丢失
第一部分 SessionStorage 首先查看sessionStorage的地方在控制台的 Application > Storage > Session Storage这里: 根据se ...
- vue通过路由传值及在页面刷新后如何保存值
1.普通的路由跳转 方式一:通过routerLinkTo方式,转为a标签的跳转,to里面相当于a标签的href路径 如下: 方式二:通过this.$router.push方式: 如下: 2.带参数的路 ...
- nignx部署Vue单页面刷新路由404问题解决
官网说明: https://router.vuejs.org/zh/guide/essentials/history-mode.html#%E8%AD%A6%E5%91%8A 在linux下搭建ngi ...
随机推荐
- Linux 内核与模块调试
一.简介 内核开发比用户空间开发更难的一个因素就是内核调试艰难.内核错误往往会导致系统宕机,很难保留出错时的现场.调试内核的关键在于你的对内核的深刻理解. 二.方法总结 1)内核模块相关指令 ht ...
- Luogu 3822 [NOI2017]整数
看懂了的大佬的题解.(这个id太巨了,找不到他的blog) 考虑直接暴力算进位均摊复杂度是对的,证明戳这里. 但是题目要求我们支持一个减操作,这就相当于返回之前操作前的结果,这对于这种均摊的复杂度的东 ...
- getline()函数的两种用法
getline()函数的输入流对象可以是标准输入流对象cin,也可以是一个文件输入流对象fin; (1)输入流对象的成员函数(有三个参数,一般除非需要自己选定停止符,并不推荐使用): basic_is ...
- Linux下boost编译安装
说明:下面内容仅针对Linux环境(boost官网为:http://www.boost.org/,可从这里下载它的源代码包,这里要求下载.tar.gz包,而非.7z..zip或bz2包). 在当前目录 ...
- autoconf手册(一)
Autoconf Creating Automatic Configuration Scripts Edition 2.13, for Autoconf version 2.13 December 1 ...
- 《Linux内核设计与实现》读书笔记(九)- 内核同步介绍
存在共享资源(共享一个文件,一块内存等等)的时候,为了防止并发访问时共享资源的数据不一致,引入了同步机制. 主要内容: 同步的概念 同步的方法-加锁 死锁 锁的粒度 1. 同步的概念 了解同步之前,先 ...
- 如何理解虚拟React的DOM(转)
目录: 1 前言 2 对前端应用状态管理思考 3 Virtual DOM 算法 4 算法实现 4.1 步骤一:用JS对象模拟DOM树 4.2 步骤二:比较两棵虚拟DOM树的差异 4.3 步骤三:把差异 ...
- 工欲善其事——Sublime Text
一直在找mac下顺手的代码编辑器,要求能方便地查找和编辑,最好能再集成调试,最后选择了sublime.用了一段时间emacs,但是学习曲线过于陡峭.尤其是眼下的要务是啃代码时,玩弄emacs有点舍本逐 ...
- Oracle SQL判断字符串是否在目标字符串中的函数
转自:http://dacoolbaby.iteye.com/blog/1772156 根据需求,写了一段方法. 用于识别以下的情况: 判断 字符串A 在用逗号分隔的字符串B中是否存在 如: v_s ...
- findControl 可以获取前台页面的控件
findControl 可以获取前台页面的控件