码迷,mamicode.com
首页 > 其他好文 > 详细

Vue中跳转路如何传值

时间:2020-03-30 09:59:06      阅读:100      评论:0      收藏:0      [点我收藏+]

标签:path   传值   dex   数据丢失   this   属性   接收   优点   one   

在vue中有两个很重要的标签 <router-link></router-link> 和<router-view></router-view>

router-link标签常常结和to属性使用达到点击跳转页面的目的,a标签的使用很像

在跳转页面时如果我们想传值,有多种方法:

一、<router-link to=”/one?a=1&b=2‘"></router-link>

接收:this.$route.query

二、,<router-link :to="{path=‘/one‘,query:{a:1,b:2}}"></router-link>

接收 :this.$route.query

三、<router-link :to="{path=‘/one‘,params:{a:1,b:2}}"></router-link>

接收:this.$route.params

四、<router-link :to="{name=One‘,params:{a:1,b:2}}"></router-link>

接收:this.$route.params

五.、<router-link :to="{name=One‘,query:{a:1,b:2}}"></router-link>

接收:this.$route.query

六、在路由 index.js文件中设置

{

path:"/one/:id/:type",

name:"One",

component:()=>import("@/views/One.vue")

}

传值时 <router-link to="/one/3/4"></router-link>

接收:this.$route.params

通过:query传值的优缺点:优点,可以传对象,刷新数据不会丢,缺点如果对象中传的属性值还是对象刷新会显示对象的原始值

通过params传值的优缺点:优点,可以传对象,缺点刷新数据丢失

通过给路由中设置:id/:type这种方式刷新数据不会丢也是最好用的

Vue中跳转路如何传值

标签:path   传值   dex   数据丢失   this   属性   接收   优点   one   

原文地址:https://www.cnblogs.com/bamboopanders/p/12596392.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!