vue的路由切换选项卡

Question

我的需求就是：
页面打开第一个默认有active的样式
当点击其他的 点击元素有active的样式，其他的元素没有
这就是个简单的选项卡，但是不同的是他们要进行路由切换。

<ul class="navBarList">
      <li v-for='(item,index) in navData'
          :to="item.path"
          :class="{cur:index==iscur}"
          @click="toggle(index)"
          v-text="item.name">
      </li>
    </ul>
    
    data(){
        return{
          navData: [{
          name: "选项一",
          path: '/home/index1/question/tab1',
          isActive: true
        }, {
          name: "选项二",
          path: '/home/index1/question/tab2',
        }],
         isActive: false
        }
    }
    
    <script>
       toggle:function (index) {

      }
    </script>

代码写的好像不对
反正就是 he选项卡一样但是点击的时候是通过路由跳转的

Answer 1

vue-router 会给你当前的router-link加上active这个className，你可以在li下使用router-link， 需要加上 linkActiveClass: 'active'

Answer 2

不知道你的需求是具体是怎样的，写了个用嵌套路由的例子:
https://codesandbox.io/s/14q9...

Answer 3

路由匹配

        <li
          v-for="(item,$index) in items"
          @click="selectStyle(item, $index)"
          :class="getItemClass(item)"
          :key="$index">
          {{item.select}}
        </li>
        
            data(){
      return{
        active: false,
        items: [
          { select: "neo", url: "/homePage/index1/question" },
          { select: "neo1", url: "/homePage/index1/question/Neo1"}
        ]
      };
      },
          methods:{
      selectStyle(item, index) {
        let that = this;
        if (item.url) {
          // this.$nextTick(function() {
            this.items.forEach(function(item) {
              that.$set(item, "active", false);
            });
            that.$set(item, "active", true);
            that.$router.push(item.url);
          // });
        }
      },
      getItemClass(item) {
        // console.log(item.url);
        let route = this.$route;
        let path = route.path;
        if(item.url == path){
          return "active";
        }else{
          return "unactive";
        }
      }
    }