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通过路由传值及在页面刷新后如何保存值的更多相关文章

  1. Vuex 页面刷新后store保存的数据会丢失 取cookie值

    在store.js中 export default new vuex.Store({ // 首先声明一个状态 state state:{ pcid: '', postList: [], } //更新状 ...

  2. vue 使用localStorage解决vuex在页面刷新后数据被清除的问题

    通常,我们在使用vue编写页面时,会需要使用vuex在组件间传递(或者说共同响应)同一个数据的变化.例如:用户的登录信息. 下面,我们使用传递用户登录信息的例子来一步步解决这个问题. 首先,我们的第一 ...

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

    https://www.jb51.net/article/138218.htm 1.原因 2.解决方法 localStorage没有时间期限,除非将它移除,sessionStorage即会话,当浏览器 ...

  4. Html 页面刷新后出现闪动

    Html 页面刷新后,或跳转后,出现闪动,抖动问题 1.查看有没有用到新字体,新字体链接位置是否存在 如: @font-face { font-family: "AvantGarde-Dem ...

  5. Vue 动态路由传值

    一.动态路由传值 1.配置动态路由: const routes = [ //动态路由路径参数以:开头 { path: '/Content/:aid', component:Content}, ] 2. ...

  6. 【vue】使用localStorage解决vuex在页面刷新后数据被清除的问题

    通常,我们在使用vue编写页面时,会需要使用vuex在组件间传递(或者说共同响应)同一个数据的变化.例如:用户的登录信息. 下面,我们使用传递用户登录信息的例子来一步步解决这个问题. 首先,我们的第一 ...

  7. vue动态路由传值以及get传值及编程式导航

    1.动态路由传值 1.配置路由处 { path: '/content/:id', component: Content }, // 动态路由 2.对应页面传值 <router-link :to= ...

  8. vue中常用的两中页面刷新的方式和页面回退

    这个方法的参数是一个整数,意思是在 history 记录中向前或者后退多少步,类似 window.history.go(n) router.push(location) 想要导航到不同的 URL,则使 ...

  9. 解决vuex数据页面刷新后初始化问题

    在vue项目的开发中经常会用到vuex来进行数据的存储,然而在开发过程中会出现刷新后页面的vuex的state数据初始化问题!下面是我用过的解决方法 利用storage缓存来实现vuex数据的刷新问题 ...

随机推荐

  1. spring boot jpa 复杂查询 动态查询 连接and和or 模糊查询 分页查询

    最近项目中用到了jpa,刚接触的时候有些激动,以前的到层忽然不用写sql不用去自己实现了,只是取个方法名就实现了,太惊艳了,惊为天人,但是慢慢的就发现不是这么回事了,在动态查询的时候,不知道怎么操作了 ...

  2. 洛谷P1060开心的金明(滚动数组优化)

    题目描述 金明今天很开心,家里购置的新房就要领钥匙了,新房里有一间他自己专用的很宽敞的房间.更让他高兴的是,妈妈昨天对他说:“你的房间需要购买哪些物品,怎么布置,你说了算,只要不超过NNN元钱就行”. ...

  3. bootstrap-suggest-plugin input可选可输(表单) 好用的前端插件

    bootstrap-suggest-plugin          DEMO下载 1.准备:页面引入(点击下载) <link rel="stylesheet" href=&q ...

  4. Python数据分析之Pandas操作大全

    从头到尾都是手码的,文中的所有示例也都是在Pycharm中运行过的,自己整理笔记的最大好处在于可以按照自己的思路来构建矿建,等到将来在需要的时候能够以最快的速度看懂并应用=_= 注:为方便表述,本章设 ...

  5. device supports x86 but apk only supports armeabi-v7a问题解决

    我们可以在build.gradle中有ndk这段代码,只要在后面加上“x86”,再sync now一下,就发现可以运行了. ndk { abiFilters "armeabi-v7a&quo ...

  6. Python实现一个LRU

    class Node: key = None value = None pre = None next = None def __init__(self, key, value): self.key ...

  7. nginx 的提升多个小文件访问的性能模块

    阿里开源的第三方模块下载地址:https://github.com/alibaba/nginx-http-concat 下载模块 git clone https://github.com/alibab ...

  8. python 基础之集合

    集合 s=set('chen xi') s1=['cx','ee','cx'] s2=set(s1)#set为集合 print(s2,type(s2)) s=list(s2) print(s,type ...

  9. C程序的执行和当前进程的结束

    内核使程序执行的唯一方法,就是调用exec函数,这个函数又会启动一个C程序启动例程,这个启动例程是C程序的启动地址.负责调用main函数,并接受mainn函数的返回值. 使得进程结束的唯一方式是隐式的 ...

  10. Spring boot 启动图片

    生成工具:http://patorjk.com/software/taag/#p=testall&h=0&v=0&f=Graffiti&t=Type%20Somethi ...