摘要:传参方式模块名称各参数传参张三效果页面显示张三但是刷新页面后,数据会丢失,显示。缺点参数值都拼接在上,会很长,同时都可被看到。模块名称各参数路由文件设置的时候把参数拼到里。老老实实的用存储。销毁页面的时候把存储的内容清除。
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
摘要:使用和组合传参路由配置获取参数刷新参数丢失显示注意此方法第一次跳转是没有问题的,参数也可以传过去,但是刷新页面后,参数就没了这个地方其实还有一个问题,当你传递的参数是类型,第一次是没有问题的,获取的时候也是类型,但是当你刷新页面后,变成类 1. 使用name和params组合传参 this.$router.push({name: details, params: {id: 233}})...
摘要:使用和组合传参路由配置获取参数刷新参数丢失显示注意此方法第一次跳转是没有问题的,参数也可以传过去,但是刷新页面后,参数就没了这个地方其实还有一个问题,当你传递的参数是类型,第一次是没有问题的,获取的时候也是类型,但是当你刷新页面后,变成类 1. 使用name和params组合传参 this.$router.push({name: details, params: {id: 233}})...
vue 头条 demo 写在前面 总结一下写 demo 过程中 遇到的一些问题,方便自己的学习总结!如有错误,还请指正! 一直想学习使用 vue ,并准备以后在实际项目使用,之前跟着慕课网 黄轶 老师 敲了一下 饿了么商品购买页的demoele效果预览 该 demo 借鉴自 hcy1996-github 这个项目,但内部内容,布局风格,完全不同,只为共同学习,共同交流 数据接口 直接打开 今日...
阅读 2231·2021-10-09 09:41
阅读 3334·2021-09-13 10:34
阅读 1887·2019-08-30 12:59
阅读 527·2019-08-29 17:27
阅读 1009·2019-08-29 16:07
阅读 2928·2019-08-29 13:15
阅读 1279·2019-08-29 13:14
阅读 1510·2019-08-26 12:18