程序员VUE

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();

  }
上一篇 下一篇

猜你喜欢

热点阅读