在线观看不卡亚洲电影_亚洲妓女99综合网_91青青青亚洲娱乐在线观看_日韩无码高清综合久久

鍍金池/ 問答/HTML5  HTML/ vue的路由切換選項卡

vue的路由切換選項卡

我的需求就是：
頁面打開第一個默認有active的樣式
當(dāng)點擊其他的 點擊元素有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選項卡一樣但是點擊的時候是通過路由跳轉(zhuǎn)的

回答
編輯回答
舊酒館

vue-router 會給你當(dāng)前的router-link加上active這個className，你可以在li下使用router-link， 需要加上 linkActiveClass: 'active'

2017年7月25日 00:10
編輯回答
尛憇藌

不知道你的需求是具體是怎樣的，寫了個用嵌套路由的例子:
https://codesandbox.io/s/14q9...

2018年7月16日 09:41
編輯回答
忘了我

路由匹配

        <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";
        }
      }
    }
2018年8月20日 21:41