关于Vue中两个vue页面传数据

一个vue页面路由跳转到另一个vue页面想要获得前一个页面的数据的方法:路由传参

路由传参方法适用于:

1:在A页面获得数据提交给B页面 / 将A页面的数据给B页面

2:A页面中点击按钮跳转到B页面,B页面需要使用A页面中的数据


Vuex和本地缓存的方法就不讲了

问题:为什么使用这种方法?

答:在A页面点击按钮路由跳转到B页面了,但是我在B页面还需要A页面中的数据

  

这是数据:
data: ‘chalk‘
这是router/index.js中的两个路由地址:
{ path: ‘/theme‘, name: ‘theme‘, component: Theme },
{ path: ‘/theme/:id‘, name: ‘themeedit‘, component: ThemeEdit }
这是固定路由地址:
{ path: ‘/theme/themeedit‘, name: ‘themeedit‘, component: ThemeEdit }

  

用法解答:

第一种用法:

A页面利用: this.$router.push({ path: `/theme/${this.data}` })    获得你想要的数据

利用桥梁(路由地址):{ path: ‘/theme/:id‘, name: ‘theme‘, component: ThemeEdit }

B页面可以通过:  $route.params.id  获取数据

例如:内容中利用插槽表达式 {{ $route.params.id }}

或者赋值给私有数据:this.data = this.$route.params.id

但是,路由地址会带有数据,此时页面地址为: http://localhost:8080/#/theme/chalk

第二种用法:

A页面利用: this.$router.push({ name: ‘themeedit‘, params: { id: this.data } })

利用桥梁(路由地址):{ path: ‘/theme/themeedit‘, name: ‘themeedit‘, component: ThemeEdit }

B页面数据获取方式和上面相同

此时页面路由地址固定为:http://localhost:8080/#/theme/themeedit

B页面中更多数据获取方法参考:$router的耦合与解耦

建议用规定之内的方法传参,参考:Vue编程式导航

原文地址:https://www.cnblogs.com/chalkbox/p/12549437.html

时间: 2024-11-03 21:32:47

关于Vue中两个vue页面传数据的相关文章

七、vue中v-for有时候对页面不会重新渲染,数组变化后如何到渲染页面

v-for不能进行双向数据绑定,页面渲染完成后,再次更改v-for遍历的数据,js里面打印的数据看到数据值已经更改,但是页面的数据就是没有渲染,这是为什么呢? vue中v-for和angularjs中的ng-repeat不用 ,它对页面只进行一次渲染.后续如果需要更改数据且显示在页面上就需要想想其他办法啦~~~ 经过多次踩坑发现如下解决办法: 1.将vue引入当前页面,如下图所示: 2.使用Vue.set方法来对数据进行更改及渲染,如下图所示:

vue中 的传值问题 父传子和子传父

vue中 关于$emit的用法 1.父组件可以使用 props 把数据传给子组件.2.子组件可以使用 $emit 触发父组件的自定义事件. vm.$emit( event, arg ) //触发当前实例上的事件 vm.$on( event, fn );//监听event事件后运行 fn: 例如:子组件: <template> <div class="train-city"> <h3>父组件传给子组件的toCity:{{sendData}}</h

vue中使用axios post上传头像/图片并实时显示到页面

前端开发中,为了更好的用户体验,在头像上传时会先将图片显示到页面然后点击保存按钮 完成图片的上传成功 代码部分有参考他人的写法. html代码: <div id="myPhoto" v-show="personalPhoto"> <div class="viewPhoto"> <img src="" alt="" id="portrait"style=&qu

----vue中遇到的IE页面跳转兼容问题----

vue项目打包之后在IE浏览器运行时页面不能跳转,并且报错,ChunkLoadError: Loading chunk 0 failed. 原因是我在utils.js里封装了一个方法,并且在组件中调用.在IE上跳转时就报错,当我把封装的方法放在组件当中时可以正常跳转,不管是什么方法只要引入utils.js就报错,原因尚未清楚.个人猜测应该是层级太深,IE找不到. 原文地址:https://www.cnblogs.com/zjy850984598/p/11789771.html

vue中数组删除,页面没重新渲染

创建一个组件时,数据类型是数组,在删除这个数组中的数据时,数组中的数据是对的,但页面渲染的数据却不对. 举例:(不一定复现) <ul> <li v-for="(item, index) in peoples" :key="index">{{item.name}} <span @click="del(index)">删除</span> </li> </ul> <scrip

每天一点点之vue框架开发 - vue中使用vue-router切换页面时自动滚动到顶部的方法

1. 在main.js入口文件中写入 //路由跳转后,页面回到顶部 router.afterEach(() => { document.body.scrollTop = 0; document.documentElement.scrollTop = 0; } 位置如下: 2. 还可以在实例router对象的时候设置 export default new Router({ mode: 'hash', // base: '/dist/', scrollBehavior: () => ({ y: 0

Vue中两种跳转方式

第一种:通过标签跳转,<router-link></router-link> 第二种:通过js跳转,定义点击事件进行跳转 原文地址:https://www.cnblogs.com/zlwei23/p/10981215.html

struts2中action向action之间传数据和action向jsp传数据理解

1,在 Action中我们经常会从这个Action跳转到另一个Action中,这时我们就要用到redirect.redirect-action.chain, 其中redirect和redirect-action是重定向,相当于浏览器二次请求,之前的数据都会丢失,所有的参数.值栈和请求属性都会丢失.chain是服务器转发action,源Action的用户请求参数.值栈.session的数据赋值给目的Action,即在目的action中可以获得源action得到的请求参数值栈,session等数据.

servlet中同一用户不同页面共享数据(sendRedirect、session、隐藏表单)

SendRedirect(“url?parameter=value”); 通过SendRedirect()我们可以将一个页面的信息传递给另外的页面. 注意:1.url表示要跳转到的servlet的url 2.servlet url名和变量之间有?号 3.如果要传递两个以上的值,他们之间要用&号分开,比如: sendRedirect(“url?parameter1=”+val1+”&parameter2=”+val2); 4.传递中文:res.setContentType("tex