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

AbnerMing 发布于2019-08-23 18:33 / 3657人阅读

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

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
}

云服务器 GPU云服务器页面传递参数 html参数传递参数参数传递对象参数传递

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

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

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

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

microcosm1994 2019-08-02 15:14 评论0 收藏0
新手使用vue-router传参时注意事项

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

clasnake 2019-08-23 17:58 评论0 收藏0
vue 模仿今日头条demo

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

simpleapples 2019-08-21 12:03 评论0 收藏0
VUE知识点集锦

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

Tecode 2019-08-23 16:02 评论0 收藏0
VUE知识点集锦

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

APICloud 2019-08-02 14:34 评论0 收藏0