vue如何通过params和query传值(刷新不丢失)

目录
  • vue通过路由传值
    • 一. 通过query传递参数刷新不丢失参数
    • 二. 通过params传递参数刷新不丢失参数
    • 三. 同时使用params和query传递参数刷新不丢失参数
  • 总的来说

vue通过路由传值

在许多跳转的同时需要完成携带参数，并且在刷新的同时不丢失参数。

$router：是路由操作对象，只写对象

$route：路由信息对象，只读对象

一. 通过query传递参数刷新不丢失参数

在需要传值的页面：

 this.$router.push({
   path: '/tasks',//通过path跳转
   query: {
  	  id : id,
	  formId : formId
   }
 })

设置的router:

{
  path: '/tasks',
  name: 'tasks-detail',
  component: () => import('@/views/todo/detail.vue')
},

在地址栏便会是这样的格式显示出参数，很像get请求的形式

通过在跳转的页面运用this.$route的方法得到传参

因为存放在地址栏所以刷新也会通过this.$route拿到。

二. 通过params传递参数刷新不丢失参数

如果要做到刷新不还能获取，其实也是在地址栏另一形式的存参在需要传值的页面：

 this.$router.push({
   path : `/tasks/${item.id}/${item.formId}`,
 })

设置的router:

{
  path: '/tasks/:id/:formId',
  name: 'tasks-detail',
  component: () => import('@/views/todo/detail.vue')
},

在地址栏便会是这样的格式显示出参数,一一对应

同样也刷新不会改变，如果是通过params传参的形式刷新参数便会丢失,类似下面这种

path:'/tasks',
params: {
  id : item.id,
  formId : item.formId
}

三. 同时使用params和query传递参数刷新不丢失参数

如果要做到刷新不还能获取，同样也是地址栏另一形式的存参在需要传值的页面：

 this.$router.push({
     path: '/tasks/' + item.id,
     query: {
       formId : item.formId
     },
 })

设置的router:

{
  path: '/tasks/:taskId',
  name: 'tasks-detail',
  props: (route) => ({ ...route.query, ...route.params }),//可以运用props结合扩展运算符获取参数
  component: () => import('@/views/todo/detail.vue')
},

在地址栏便会是这样的格式显示出参数

同样也刷新不会改变,地址栏更能看出结合版，这种混合运用利用props更方便接收值

总的来说

1.如果需要做到刷新不丢失参数和值必须通过地址栏

2.query传参地址更像是get请求的格式

3.params如果需要刷新不丢是直接在path上对应形式传参，不能通过params的对象传参

4.结合使用可以通过props更好的接收参数

以上为个人经验，希望能给大家一个参考，也希望大家多多支持我们。

赞 (0)

相关推荐

  • vue router使用query和params传参的使用和区别

    vue router使用query和params传参的使用和区别

    写在前面: 传参是前端经常需要用的一个操作,很多场景都会需要用到上个页面的参数,本文将会详细介绍vue router 是如何进行传参的,以及一些小细节问题.有需要的朋友可以做一下参考,喜欢的可以点波赞,或者关注一下,希望可以帮到大家. Vue router如何传参 params.query是什么? params:/router1/:id ,/router1/123,/router1/789 ,这里的id叫做params query:/router1?id=123 ,/router1?id=456

  • vue 中的动态传参和query传参操作

    Vue router 如何传参 params.query 是什么? params:/router1/:id,这里的 id 叫做 params.例如/router1/123, /router1/789 query:/router1?id=123,这里的 id 叫做 query.例如/router1?id=456 query 方式传参和接收参数 传参: this.$router.push({ path:'/xxx' query:{ id:id } }) this.$router.push 传参时,

  • vue params、query传参使用详解

    最近在学习Vue,本文介绍了vue params.query传参使用,分享给大家,也给自己留个笔记 声明式:<router-link :to="..."> 编程式:router.push(...) 这两种方式 都可以实现跳转链接,在上篇文章继续,通过A组件跳转链接到B组件并且传参数. 1.router.push使用 router/index.js export default new Router({ routes: [ { path: '/', name: 'A', co

  • vue如何通过params和query传值(刷新不丢失)

    vue如何通过params和query传值(刷新不丢失)

    目录 vue通过路由传值 一. 通过query传递参数刷新不丢失参数 二. 通过params传递参数刷新不丢失参数 三. 同时使用params和query传递参数刷新不丢失参数 总的来说 vue通过路由传值 在许多跳转的同时需要完成携带参数,并且在刷新的同时不丢失参数. $router:是路由操作对象,只写对象 $route:路由信息对象,只读对象 一. 通过query传递参数刷新不丢失参数 在需要传值的页面: this.$router.push({ path: '/tasks',//通过pat

  • vue路由传参页面刷新参数丢失问题解决方案

    最近项目中涉及到跨页面传参数和后台进行数据交互,看到需求之后第一反应就是用路由传参来解决:Vue中给我们提供了三种路由传参方式,下面我们一个一个的来看一下: 方法一:params传参: this.$router.push({ name:"admin", //这里的params是一个对象,id是属性名,item.id是值(可以从当前组件或者Vue实例上直接取) params:{id:item.id} }) //这个组件对应的路由配置 { //组件路径 path: '/admin', //

  • vue 子组件向父组件传值方法

    子组件注册触发事件,父组件注册 触发子组件事件后的方法写在method里面 父组件这么写 <component-a v-on:child-say="listenToMyBoy"></component-a> <p>Do you like me? {{childWords}}</p> methods: { listenToMyBoy: function (somedata){ this.childWords = somedata } } 子

  • Vue项目webpack打包部署到Tomcat刷新报404错误问题的解决方案

    遇到的问题 使用webpack打包vue后,将打包好的文件,发布到Tomcat上,访问成功,但是刷新后页面报404错. 在网上查找了一下,原来是HTML5 History 模式引发的问题,具体为什么,vue官方已经给出了解释,你可以看https://router.vuejs.org/zh-cn/essentials/history-mode.html 但是看完问题又来了,官方给出的解决方案中没有说tomcat下,怎么决解. 解决方案 根据官方给出的解决方案原理 你要在服务端增加一个覆盖所有情况的

  • vue 父组件给子组件传值子组件给父组件传值的实例代码

    父组件如何给子组件传值 使用props 举个例子: 子组件:fromTest.vue,父组件 app.vue fromTest.vue <template> <h2>{{title}}</h2> //title必须是父组件传递的 </template> <script> export default (){ props:["title"] //可以是数组,也可以是对象 //如何对title进行校验 //props:{ // t

  • 解决Vue在封装了Axios后手动刷新页面拦截器无效的问题

    项目类型:vue+vux+axios 刚开始,把Axios封装在了http.js文件里面,然后为了使用VUX的提示框消息,把拦截器直接写在了main.js里面.直接调用接口,一切正常. 然而因为返回值有统一的code错误代码提示,所以在拦截器里面加入了code的判断以便统一返回值.刚开始一切都是按照预期的结果来走的.就在一个夜黑风高的晚上,我头晕眼花的按F5手动刷新了一下页面,惊奇的发现拦截器失效了,并没有拦截外面的Coode Json代码层,而是直接把服务器的全部json数据劈头盖脸的砸在了我

  • vue中父子组件注意事项,传值及slot应用技巧

    一.父子组件传值 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>父子组件传值</title> <style> </style> <script src="./vue.js"></script> </head> <bod

  • 解决vue+element 键盘回车事件导致页面刷新的问题

    背景 今天发现输入框输入内容后回车就会刷新页面 解决 <el-form :inline="true" @submit.native.prevent> </el-form> el-from 加上 @submit.native.prevent 具体是参考element-ui文档解决的 W3C 标准中有如下规定: When there is only one single-line text input field in a form, the user agent

  • vue单页开发父子组件传值思路详解

    vue单页开发时经常需要父子组件之间传值,自己用过但是不是很熟练,这里我抽空整理了一下思路,写写自己的总结. GitHub地址:https://github.com/leileibrother/wechat-vue 文件目录如下图,example.vue是父组件,exampleChild.vue是子组件. 父组件引入子组件,父组件html的代码如下: <template> <div> <h3>这是父组件</h3> <p style="marg

随机推荐