vue 中 vue this.$router.pushh 中使用name和params，在控制台输出route.params为什么是“{}”？

来源：蜘蛛抓取(WebSpider) 时间：2024-01-18 10:31 标签： vue不同页面间如何传递数据
一、router-link传递可以给router-link的to属性传一个对象，通过params传递先看路由首页routerindex代码，会把id和name传递给名为routernew的路由组件 再来看接收参数的routernew路由组件的代码通过this.$route.params来接收对应的参数 注意，在你的路由配置文件里，在创建路由对象的时候，不能缺少对应的字段，如下代码// 创建VueRouter对象 const routes = [ { path:"/routernew", name:"routernew", component:routernew } ] 二、this.$router.push传递在路由首页里有

跳转至新路由页面

一段代码，其中有个点击事件，去触发这个点击事件在methods里写入如下代码，也可以传递参数至对应页面methods:{ tonew(){ this.$router.push({ name:"routernew", params:{ id:this.id, name:this.nametext, } }) } } 三、params和query的区别除了params可以传递参数，query也可以，写法其实很相似，区别在于1、params需要用name来引入，query需要path来引入params声明式传递参数至其他页面 params编程式this.$router.push({ name:"routernew", params:{ id:this.id, name:this.nametext, } }) query声明式传递参数至其他页面 query编程式this.$router.push({ path:"./routernew", query:{ id:this.id, name:this.nametext, } }) 其中query的接收参数方式和params很像，{{this.$route.query.id}}2、query类似于ajax中get传参，params类似于post，即query在浏览器地址栏中显示参数，params不显示params的query的四、实例：以动态数据实现传递参数，不再是写死的值路由首页代码分析1、首先用axios去请求接口，拿到数据2、在DOM中写v-for循环，通过@click="senddata($event)"来获取当前元素的值，senddata可以自定义3、我这边在p标签上绑定了一些动态数据，比如:data-id和:data-fullname4、最后通过点击事件，e.target.dataset获取到自定义的属性的值，再用params传递给其他页面 接下来在其他页面通过this.$route.params接收传过来的参数并显示，或者做其他操作

我要回帖

更多关于 vue不同页面间如何传递数据 的文章

 

随机推荐