VUE学习--路由跳转方式||路由跳转携带参数方式||目标路由接受参数方式

跳转方式1:.使用便签跳转, <router-link to="{path:'路由地址',params:{传的数据},query:{传的参数}" >;
跳转方式2:导航跳转,{
在路由内 (路由对象) router.push({
  path:'路径',//具有导航功能
  name:‘路由名称’,,//同样具有导航功能
  params:{传的数据},
  query:{传的参数}"
});
在组件内 (路由对象)this.$router.push(参数同上);

传参方式1:query:{传的参数}",会显示在url上,类似get请求传参,也可跟在path后面,目标路由获取方法:this.$route.query.id;
传参方式2:params:{传的参数}",不会显示在url上,类似post请求传参,不可跟在path后面,目标路由获取方法:this.$route.params.id;
注意:this.$route与this.$router的区别:
$route为当前router跳转对象里面可以获取name、path、query、params等;
$router为VueRouter实例,想要导航到不同URL,则使用$router.push方法;
前者用于‘获取传递的参数’,后者用于‘路由导航’;

posted @ 2019-05-17 10:38  风爵001  阅读(948)  评论(0编辑  收藏  举报