Vue中跳转路如何传值

Posted 2021-03-03 bamboopanders

在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这种方式刷新数据不会丢也是最好用的