根据路由类型不同，切换至对应tab

首先在router文件夹的index.js文件里

{

path: '/about/:type',//至关重要，定义类型

name: 'About',

// route level code-splitting

// this generates a separate chunk (about.[hash].js) for this route

// which is lazy-loaded when the route is visited.

component: () => import(/* webpackChunkName: "about" */ '../views/About.vue')

},

然后在点击事件跳转的地方

            :title="$t(`global.about`)"

            class="ly_menu_p_1"

            name="about"

          >

            class="ly_menu_l"

            :title="$t(`global.aboutUs`)"

            name="about1"

            to="/about/1"//至关重要，加上类型区分

            @click="

              () => {

                menushow = false;

              }

            "

          />

            class="ly_menu_l"

            :title="$t(`global.contact`)"

            name="about2"

            to="/about/2"//至关重要，加上类型区分

            @click="

              () => {

                menushow = false;

              }

            "

          />

在created里获取路由路径

 created() {

   this.loadPage()//这是调的接口，渲染about页面的

    console.log(this.$route.path);

    if (this.$route.path == "/about/1") {

      this.active = 0;//active最开始在data里定义的是0

    } else {

      this.active = 1;

    }

  },

这是html,我就把重点写了哈,就是通过$route.path来切换标签

        v-model="active"

        color="rgb(174, 51, 60)"

        title-active-color="#AE333C"

        :line-width="130"

        :ellipsis="false"

        :swipeable="true"

      >

  //标签1为About

   //标签1为Business Cooperation

最后为了避免在当前about页面点击跳转事件不刷新，我们可以在watch监听路由

 watch: {

    $route: "reloadRoute",//监听到了路由变化，执行该方法

  },

methods:{

reloadRoute() {

      if (this.$route.path == "/about/1") {

        this.active = 0;

      } else {

        this.active = 1;

      }

      this.$nextTick(() => {

        this.loadPage();//这是调的接口，渲染about页面的

      });

    },

}

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！