iview tabs 切换到到指定的页面

Question

谁能知道用ivew的tabs组件，能直接从其他页面跳转到tab的第二页吗？我现在目前这样写的用router push是跳不过来啊

Answer 1

我这里是把mounted里面的方法写到created里就可以了

Answer 2

路由配置

const routes = [
  { path: "/", component: Home },
  
  // 确保这里你没有配置错
  { path: "/tabs/:paramName", component: Tabss }

  // 推荐query方式
  // { path: "/tabs", component: Tabss }
];

跳转链接

<router-link to="/tabs/name2">跳转到指定Tab</router-link>

// 推荐query方式
<!-- <router-link to="/tabs?paramName=name2">跳转到指定Tab</router-link> -->

页面赋值

export default {
  data() {
    return {
      paramName: "name1"
    };
  },
  mounted() {
    this.paramName = this.$route.params.paramName;
    // 推荐query方式
    // 路由跳转是 /tabs?paramName=name2
    // if (this.$route.query.paramName != undefined) {
    //   this.paramName = this.$route.query.paramName;
    // }
  }
};

预览链接

点击查看

Answer 3

直接在钩子函数中设置'pageName'的值，就会自动显示第二个tab页内容