VUE解决tabs栏路由跳转问题
2020-05-30 本文已影响0人
一只菜鸟正在脱毛
解决切换tabs栏的时候 记录所切换的路由地址不发生路由串套
1、如果是判断父理由就写在 APP.vue里:
// 判断路由
setChannel() {
var route = this.$route.path;
if (route == "/") {
this.channel = "/";
} else if (route.indexOf("FreeSalary") >= 0) {
this.channel = "/FreeSalary";
} else if (route.indexOf("Partner") >= 0) {
this.channel = "/Partner";
} else if (route.indexOf("Customer") >= 0) {
this.channel = "/Customer/salary";//页面进入是tabs栏父和子同时高亮,并且子路由内容显示
} else if (route.indexOf("Aboutus") >= 0) {
this.channel = "/Aboutus/company";
} else {
this.channel = "/";
}
console.log("route", route, this.channel);
},
mounted() {
this.setChannel();//页面刷新的时候不跳转页面
},
watch: {
$route() {
this.setChannel();
}
},
2.子路由页面判断:
watch: {
$route() {
this.setactiveIndex();
}
},
methods: {
setactiveIndex() {
var route = this.$route.path;
if (route.indexOf("company") >= 0) {
this.activeIndex = "/Aboutus/company";
} else if (route.indexOf("contact") >= 0) {
this.activeIndex = "/Aboutus/contact";
} else if (route.indexOf("news") >= 0) {
this.activeIndex = "/Aboutus/news";
} else {
this.activeIndex = "/Aboutus/company";
}
// console.log("route", route, this.activeIndex);
},
},
mounted() {
this.setactiveIndex();
}