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