vue 路由传参的三种方式

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"))));
©著作权归作者所有,转载或内容合作请联系作者
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。

推荐阅读更多精彩内容