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. 【知识学习】PHP实现批量替换字典后缀

    <?php //要打开字典的物理路径 $filename = 'E:\Local Test\WWW\password.txt'; $handle = fopen($filename,'r') o ...

  2. CDH

    CDH 1.CDH简介 CDH 2.Cloudera Manager的安装     软件下载地址: 链接:https://pan.baidu.com/s/1C5HpiVEOtH_4PjylyJaXvA ...

  3. Java面向对象编程 -4

    声明static属性 static 是一个关键字,这个关键字主要是用来定义属性和方法. static内存分析 在正常开发之中每一个对象都要保存有各自的属性 所以此时程序没有问题 但是如果country ...

  4. LeetCode 234. Palindrome Linked List(判断是否为回文链表)

    题意:判断是否为回文链表,要求时间复杂度O(n),空间复杂度O(1). 分析: (1)利用快慢指针找到链表的中心 (2)进行步骤(1)的过程中,对前半部分链表进行反转 (3)如果链表长是偶数,首先比较 ...

  5. dp求解各种子串子序列

    目录 概念 最长上升子序列 最长连续子串 最长公共子序列 最长公共上升子序列 注:dp可能并不是求解该这些问题的最优算法,这里只是做一个dp 算法的简介. 概念 定义:假设现有一个 string = ...

  6. 基础总结篇之七:ContentProvider之读写短消息

    转自:http://blog.csdn.net/wellsoho/article/details/49494167 今天我们来讲一下如何利用ContentProvider读写短消息. 上次我们讲了如何 ...

  7. 【摘录自MDN】预定义函数

    JavaScript语言有好些个顶级的内建函数: eval() eval()方法会对一串字符串形式的JavaScript代码字符求值. uneval()  uneval()方法创建的一个Object的 ...

  8. python 之并发编程更新版进程池与进程池比较与回调函数

    一.更新版进程池与进程池比较 from concurrent.futures import ProcessPoolExecutor, ThreadPoolExecutor import os, tim ...

  9. kafka2x-Elasticsearch 数据同步工具demo

    Bboss is a good elasticsearch Java rest client. It operates and accesses elasticsearch in a way simi ...

  10. 「快学Docker」Docker简介、安装和Hello World实现

    前言 Docker已经成为了一门炙手可热的技术,每个程序员(特别是后端程序员)都应该学习下Docker这门技术. Docker是什么 来自官网的定义:Docker是以Docker容器为资源分割和调度的 ...