vue路由传参刷新丢失

没有系统学习过vue，以前使用路由传参都是直接this.$router.push({name:‘main’,params:{‘id’: 123}})的，没有在路由定义中配置参数，如下：

复制代码
router:[
{
path:‘/main’,
name:‘main’,
component:Main
}]

// 从index.vue,携带id=123跳到main.vue
this.$router.push({name:‘main’,params:{‘id’:123}}
复制代码
所以一旦页面刷新就会丢失路由传过来的参数了。

解决办法：

1.不修改路由配置，使用sessionStorage来马上缓存(通常在created钩子函数中)获得的路由参数，这种方法要自己把握好什么时候set,什么时候get,什么时候remove。

2.配置路由参数：配置后刷新不会丢失路由传参数

复制代码
router:[
{
path:‘/main/:id’,
name:‘main’,
component:Main
}]

// 从index.vue,携带id=123跳到main.vue
this.$router.push({name:‘main’,params:{‘id’:123}}
复制代码

3.使用query

复制代码
router:[
{
path:‘/main/’,
name:‘main’,
component:Main
}]

// 从index.vue,携带id=123跳到main.vue
this.$router.push({name:‘main’,query:{‘id’:123}}
复制代码

params与query

params：/router1/:id ，/router1/123，/router1/789 ,这里的id叫做params

query：/router1?id=123 ,/router1?id=456 ,这里的id叫做query。

当使用params方法传参的时候，要在路由后面加参数名，成为路由的一部分，并且传参的时候，参数名要跟路由后面设置的参数名对应。使用query方法，就没有这种限制，直接在跳转里面用就可以，另外query是拼接在url后面的参数，没有也没关系。

https://blog.csdn.net/bluefish_flying/article/details/81011230

好记性不如烂笔头，每天记录一点点

vue路由传参刷新丢失相关推荐

vue路由传参的三种方式/含页面刷新参数丢失解决方案(详细)
vue路由传参的三种方式以及页面刷新参数丢失问题一.路由传参的三种方式 1.传参方式一:params传参 2.传参方式二:路由属性配置传参 3.传参方式三:query传参二.三种传递方式的区别一 ...
详解vue路由传参的三种方式
在我们开发vue项目的时候,路由传参几乎是我们必须要用到的,一般出现场景是,当我们点击某个组件的某个按钮时跳转到另一个组件中,并携带参数,便于第二个组件获取数据.下面我就来说说vue路由传参的三种方式 ...
【vue】vue路由传参的三种方式
前言 vue 路由传参的使用场景一般都是应用在父路由跳转到子路由时,携带参数跳转.传参方式可划分为 params 传参和 query 传参,而 params 传参又可分为在 url 中显示参数和不显示 ...
Vue路由传参的几种方式
前言:顾名思义,vue路由传参是指嵌套路由时父路由向子路由传递参数,否则操作无效.传参方式可以划分为params传参和query传参,params传参又可以分为url中显示参数和不显示参数两种方式.具 ...
vue路由传参的四种方式
vue路由传参一.router-link路由导航父组件: 使用<router-link to = "/跳转路径/传入的参数"></router-link> ...
vue路由+ elementUI表格组件：loop文章列表页enter内容页（vue路由传参userid）- 代码篇
elementUI表格组件,response.data.newsLists列表如何循环出来?如何点击传参numId,并进入对应的内容页? 本文意图: 使用官方table组件:实现API调用:文章遍历. ...
Vue路由传参params 与 query
一.路由传参分为 params 传参与 query 传参 1. params params 传参类似于网络请求中的 post 请求,params 传过去的参数不会显示在地址栏中(但是不能刷新).par ...
Vue路由传参详解（params 与 query）
Vue路由传参详解(params 与 query) 前言: 路由传参分为 params 传参与 query 传参 params 传参类似于网络请求中的 post 请求,params 传过去的参数不会显 ...
Vue路由传参三种方式
Vue路由传参三种方式 params传参路由属性配置传参 query传参一.params传参 this.$router.push({ name:"admin", //这里的pa ...

vue路由传参刷新丢失

vue路由传参刷新丢失相关推荐

最新文章

热门文章