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

Posted 2021-11-30 llslmb

跳转方式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方法；
前者用于‘获取传递的参数’，后者用于‘路由导航’；