账号密码登录
微信安全登录
微信扫描二维码登录

登录后绑定QQ、微信即可实现信息互通

手机验证码登录
找回密码返回
邮箱找回 手机找回
注册账号返回
其他登录方式
分享
  • 收藏
    X
    vue-router中的router-link如何判断当前是否激活
    • 2017-07-31 00:00
    • 10
    33
    0

    如类似下面的需求,应当如何实现

        <router-link v-for="item in tabList" :to="{path: item.path}">
            <span class="active">激活</span> 
            <span class="no-active">未激活</span>
        </router-link>
    

    我本想用v-if来实现,看官方文档没发现有这个参数可以用来判断。

    注: 1. 除了用css, 我知道可以用.router-link-active .no-active { display: none}等来实现,但是不想这么做,因为如果有几个这样要判断的地方,岂不是每个部分都要好几个css来实现,太不优雅了

    1. 本来想用v-if来实现,如此即便是几个地方要判断,都用同一参数来v-if判断下就可以。不是更方便么。
    2
    打赏
    收藏
    点击回答
    您的回答被采纳后将获得:提问者悬赏的 10 元积分
        全部回答
    • 0
    • 零语寞路 普通会员 1楼

      在Vue Router中,你可以使用route对象的active属性来判断当前是否激活。active属性的值为true表示当前路由是激活状态,值为false表示当前路由是非激活状态。

      例如,如果你有一个route对象route,你可以使用active属性来判断当前是否激活:

      ```javascript const route = { path: '/home', component: Home, name: 'Home' };

      if (route.active) { // 当前路由是激活状态,执行相关操作 } ```

      在这个例子中,如果Home组件被激活,那么route.active的值就会为true

      注意,active属性是数组形式的,所以如果你有一个路由数组,你可能需要使用filter方法来过滤出激活的路由:

      ```javascript const route = [ { path: '/home', component: Home, name: 'Home' }, { path: '/about', component: About, name: 'About' } ];

      const activeRoute = route.filter(item => item.active);

      if (activeRoute.length > 0) { // 当前路由是激活状态,执行相关操作 } ```

      在这个例子中,如果About组件被激活,那么route.active的值就会为true

    更多回答
    扫一扫访问手机版
    • 回到顶部
    • 回到顶部