美文网首页
vue 路由传参的三种方式

vue 路由传参的三种方式

作者: 无名程序猿 | 来源:发表于2022-03-18 08:08 被阅读0次

vue路由传参方式

params

// 用法:
{
   path:"/home/:name",
   name:"home",
   component:home
}
// 取值:
this.$router.params.name
//  缺点:刷新参数丢失
//  解决方案:在router.js文件中路由处添加占位符 
//  例如:/home/:name

query

 用法:router-link 参数   :to={
   path:"/home",
   name:"home",
   query:{
     name:"参数"
   }
}
取值:this.route.query.name
缺点:字符串类型参数刷新不丢失 对象数组类型刷新丢参
解决方案:將数组或对象参数转换为字符串类型传递

vuex + sessionStore

將参数数据存储到store中传递 同时保存到sessionStore中
用法:
//在页面刷新时将vuex里的信息保存到localStorage里 window.addEventListener("beforeunload",()=>{ 
localStorage.setItem("messageStore",JSON.stringify(this.$store.state)) 
}) 
//在页面加载时读取localStorage里的状态信息
localStorage.getItem("messageStore") && this.$store.replaceState(Object.assign(this.$store.state,JSON.parse(localStorage.getItem("messageStore"))));

相关文章

  • vue 路由传参的三种方式

    vue路由传参方式 params query vuex + sessionStore

  • Vue-Router

    1. 路由配置 默认路由跳转 在 new Router时可用的配置参数: 2.路由传参 Vue路由传参的几种方式 ...

  • vue - 路由带参跳转

    vue路由传参按照传参方式可划分为params传参和query传参; params传参分为在url中显示和影藏参数...

  • 31.vue传参

    1.vue传参 vue传参使用路由传参params,query,或者使用vuex,localStorage,vue...

  • vue-router

    vue传参两种方式 1、对象传参2、路径传参 vue路由两种模式 1、hash模式 onhashchange2、h...

  • 开发之路十五——vue开发笔记

    ps:好记性不如烂笔头,记录开发vue过程中的点滴 1、路由传参(3种方式) params传参(显示参数)需要路由...

  • 几种vue的组件传值方式

    几种vue的组件传值方式 1、路由传参 ①定义路由时加上参数props: true,在定义路由路径时要留有参数占位...

  • nuxt路由及传参

    最近的nuxt项目中经常会用到路由传参,故在此有所总结了下nuxt中传参的方式和vue项目中传参的方式 nuxt ...

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

    Vue中给我们提供了三种路由传参方式,下面我们一个一个的来看一下:注意: 获取参数的时候是route,跳转和传参的...

  • vue路由的介绍(二)--vue动态路由和get的传值

    vue动态路由和get的传值---->同属于路由的传参 1,vue动态路由: 动态路由的配置: ①,在配置路由时加...

网友评论

      本文标题:vue 路由传参的三种方式

      本文链接:https://www.haomeiwen.com/subject/glhidrtx.html