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. 吴裕雄 python 神经网络——TensorFlow训练神经网络:花瓣识别

    import os import glob import os.path import numpy as np import tensorflow as tf from tensorflow.pyth ...

  2. VS中编码格式的问题(待总结)

    今天又遇到这样的事情了,VS中代码明明是正确的,却报某个变量未定义.百思不得解,前面增加了一个换行之后,竟然又神奇般的复原了. 最后确认是编码格式的问题,后来把有问题的那部分代码粘贴到微软的" ...

  3. STM32cubeMX安装FW_F4容易出错失败的解决办法

    在CUBEMXV5.30安装F4的支持包V1.241的反复失败,无法自动生成代码.后来发现了一种办法: 在stm32的官网下载V1.24.0和en.patch_cubefw_f4.zip(V1.24. ...

  4. Notepad++查看文本文件的总的字符数、GBK字节数、UTF8字节数

    如果其编码是 小结:UTF-8编码下,一个汉字占3字节,GBK编码下,一个汉字占2字节:

  5. 如何使用charles对Android Https进行抓包

      Charles.png charles是一款在Mac下常用的截取网络封包工具,对Android Http进行抓包,只要对手机设置代理即可,但对Android Https进行抓包还是破费一些功夫,网 ...

  6. Vagrant 安装使用

    先安装虚拟机 https://www.virtualbox.org/ 再安装 https://www.vagrantup.com/  1.nginxhttp://nginx.org/download/ ...

  7. [Write-up]-Trollcave: 1.2

    关于 下载地址:点我 Flag:root/flag.txt 哔哩哔哩:视频 信息收集 不知道VM虚拟机怎么啦,导入镜像后,用Nmap扫了,发现不了主机.所以这次用了VBox. vboxnet0的IP为 ...

  8. c#DDOS代码

    //在工程属性中设置"允许不安全代码"为true ?using System; using System.Net; using System.Net.Sockets; using ...

  9. win10常用快捷键总结

    前言: 很多快捷键在不同版本系统基本相同的,但是今天推送的这篇文章更多的介绍 win10快捷键,微软也是大力推广 旗舰系统 win10 ,所以大家提前升级,提前学习还是有必要的.毕竟2020年微软会放 ...

  10. 6 JavaScript函数&内置构造&函数提升&函数对象&箭头函数&函数参数&参数的值传递与对象传递

    JavaScript函数:使用关键字function定义,也可以使用内置的JavaScript函数构造器定义 匿名函数: 函数表达式可以存储在变量中,并且该变量也可以作为函数使用. 实际上是匿名函数. ...