资讯专栏INFORMATION COLUMN

Vue 项目功能实现:router 传递参数并解决刷新页面参数丢失问题

AbnerMing / 3583人阅读

摘要:传参方式模块名称各参数传参张三效果页面显示张三但是刷新页面后,数据会丢失,显示。缺点参数值都拼接在上,会很长,同时都可被看到。模块名称各参数路由文件设置的时候把参数拼到里。老老实实的用存储。销毁页面的时候把存储的内容清除。

Vue Router 传参方式: 1. this.$router.push({ name: "模块名称", params: { // 各参数 } }) router.js:
export default new Router({
  routes: [
    {
      path: "/paramsPassingByRouter",
      component: ParamsPassingByRouter,
      children: [
        {
          path: "paramsMode",
          name: "paramsMode",
          component: ParamsMode
        }
      ]
    }
  ]
})
ParamsPassingByRouter.vue:




ParamsMode.vue:

{{ testData }}
效果:

url:http://localhost:8081/#/paramsPassingByRouter/paramsMode
页面显示:{"id":"20180101","name":"张三","aka":"z3","age":"18"}

但是刷新页面后,数据会丢失,显示:{}。

2. this.$router.push({ name: "模块名称", query: { // 各参数 } }) router.js:
export default new Router({
  routes: [
    {
      path: "/paramsPassingByRouter",
      component: ParamsPassingByRouter,
      children: [
        {
          path: "queryMode",
          name: "queryMode",
          component: QueryMode
        }
      ]
    }
  ]
})
ParamsPassingByRouter.vue:




QueryMode.vue:

{{ testData }}
效果:

url:http://localhost:8081/#/paramsPassingByRouter/queryMode?id=20180101&name=%E5%BC%A0%E4%B8%89&aka=z3&age=18
页面显示:{"id":"20180101","name":"张三","aka":"z3","age":"18"}

刷新页面后,数据不会丢失。

解决刷新页面数据丢失的方案:

使用 this.$router.push({ name: "模块名称", query: { // 各参数 } }) 方式传参。

缺点:参数值都拼接在 url 上,url 会很长,同时都可被看到。

this.$router.push({ name: "模块名称", params: { // 各参数 } }) 路由文件设置的时候把参数拼到 url 里。

url:http://localhost:8081/#/paramsPassingByRouter/paramsMode/20180101/%E5%BC%A0%E4%B8%89/z3/18
缺点:同上。

1 和 2 结合使用:this.$router.push({ name: "模块名称", params: { // 各参数 }, query: { // 各参数 } })

老老实实的用 localStorage 存储。

url: http://localhost:8081/#/paramsPassingByRouter/paramsMode/z3
可以与 params 和 query 方式配合使用,可以暴露的参数显示在 url 上,同时刷新参数也不会丢失。
销毁页面的时候把 localStorage 存储的内容清除。
// router.js
{
  path: "paramsMode/:aka",
  name: "paramsMode",
  component: ParamsMode
}


文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/105429.html

相关文章

  • 新手使用vue-router传参时注意事项

    摘要:使用和组合传参路由配置获取参数刷新参数丢失显示注意此方法第一次跳转是没有问题的,参数也可以传过去,但是刷新页面后,参数就没了这个地方其实还有一个问题,当你传递的参数是类型,第一次是没有问题的,获取的时候也是类型,但是当你刷新页面后,变成类 1. 使用name和params组合传参 this.$router.push({name: details, params: {id: 233}})...

    microcosm1994 评论0 收藏0
  • 新手使用vue-router传参时注意事项

    摘要:使用和组合传参路由配置获取参数刷新参数丢失显示注意此方法第一次跳转是没有问题的,参数也可以传过去,但是刷新页面后,参数就没了这个地方其实还有一个问题,当你传递的参数是类型,第一次是没有问题的,获取的时候也是类型,但是当你刷新页面后,变成类 1. 使用name和params组合传参 this.$router.push({name: details, params: {id: 233}})...

    clasnake 评论0 收藏0
  • vue 模仿今日头条demo

    vue 头条 demo 写在前面 总结一下写 demo 过程中 遇到的一些问题,方便自己的学习总结!如有错误,还请指正! 一直想学习使用 vue ,并准备以后在实际项目使用,之前跟着慕课网 黄轶 老师 敲了一下 饿了么商品购买页的demoele效果预览 该 demo 借鉴自 hcy1996-github 这个项目,但内部内容,布局风格,完全不同,只为共同学习,共同交流 数据接口 直接打开 今日...

    simpleapples 评论0 收藏0
  • VUE知识点集锦

    摘要:载入前后在阶段,实例的和都初始化了,但还是挂载之前为虚拟的节点,还未替换。类似于,不同在于提交的是,而不是直接变更状态可以包含任意异步操作。 vue基础 1、 router 路由与 a 标签的区别:https://www.jianshu.com/p/34b...2、 VUE双向绑定的原理: 答:VUE实现双向数据绑定的原理就是利用了 Object.defineProperty() 这个...

    Tecode 评论0 收藏0
  • VUE知识点集锦

    摘要:载入前后在阶段,实例的和都初始化了,但还是挂载之前为虚拟的节点,还未替换。类似于,不同在于提交的是,而不是直接变更状态可以包含任意异步操作。 vue基础 1、 router 路由与 a 标签的区别:https://www.jianshu.com/p/34b...2、 VUE双向绑定的原理: 答:VUE实现双向数据绑定的原理就是利用了 Object.defineProperty() 这个...

    APICloud 评论0 收藏0

发表评论

0条评论

AbnerMing

|高级讲师

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<