代码之家  ›  专栏  ›  技术社区  ›  movac

如何禁用vuejs路由器链接?

  •  0
  • movac  · 技术社区  · 4 年前

    我有一个使用vue创建的单页应用程序,导航链接都是使用vue完成的 router-link 标签。导航系统中有几个项目我的老板想在导航系统中安装,但被禁用了,这样人们就可以看到一些即将推出的功能。然而,我不知道如何完全禁用路由器链接!

    preventDefault 什么都不做, @click.native.prevent="stopClick()" 什么都不做(我试着把它发送到一个函数,看看这是否会阻止点击,但它只是调用函数并路由,尽管有阻止),添加一个 disabled 类并设置css规则 pointer-events: none; 什么都不做。我不知道还能尝试什么,唯一的办法是让禁用的链接变成普通文本而不是路由器链接吗?

    0 回复  |  直到 4 年前
        1
  •  20
  •   BTL    4 年前

    今天仍然没有原生的解决方案。但在vue路由器回购协议上有一个公开的PR: https://github.com/vuejs/vue-router/pull/2098 .

    解决方法是使用:

    <router-link 
      :disabled="!whateverActivatesThisLink" 
      :event="whateverActivatesThisLink ? 'click' : ''"
      to="/link"
    >
      /link
    </router-link>
    
        2
  •  17
  •   Gabriel Berchmann    4 年前

    你可以用

    <router-link 
      :is="isDisabled ? 'span' : 'router-link'"
      to="/link"
    >
      /link
    </router-link>
    
        3
  •  13
  •   Tyler Collier    4 年前

    没有内置的东西,而且 probably won't ever be 也就是说,对我来说最有效的是使用CSS。

    <router-link to="/my-route" :class="{ disabled: someBoolean }" />
    
    .disabled {
        opacity: 0.5;
        pointer-events: none;
    }
    

    不透明度使其看起来被禁用,而 pointer-events: none; 这样你就不需要处理 :hover 样式,或设置 cursor 风格

        4
  •  10
  •   Majed Badawi    4 年前

    我认为没有合适的解决方案来解决这个问题,因为路由器链路没有 disabled 属性,但其中一个技巧是使用 tag="button" 为了添加所需的属性,如下所示:

    <router-link 
         to="/link"
         tag="button"
         :disabled="true"
    >
      Link
    </router-link>
    
        5
  •  5
  •   CyberAP    3 年前

    方法1:防止单击事件

    诀窍是在捕获阶段处理事件,并阻止它向上传播。

    <router-link 
      to="/path"
      @click.native.capture.stop
    >
      Go to page
    </router-link>
    

    或者必须:

    <router-link 
      to="/path"
      @click.native.capture="handleClick"
    >
      Go to page
    </router-link>
    
    function handleClick(event) {
      if (passesSomeCheck) event.stopPropagation();
    }
    

    如果您想从Vue Router获取解析路径,从而在没有SPA导航的情况下强制加载页面,这可能非常有用。

    function handleClick(event) {
      if (loadWithoutSpa) {
        event.stopPropagation();
        window.location.href = event.currentTarget.href;
      };
    }
    

    方法2:将默认事件更改为空字符串

    <router-link 
      to="/path"
      event
    >
      Go to page
    </router-link>
    

    方法3:使用 <a> 标签

    <a :href="$router.resolve(route).href">
      Go to page
    </a>
    

    其中的路线可以与你经过的路线完全相同 to 支撑 router-link .

        6
  •  3
  •   Paolo Sparker73    3 年前

    就这么定了 to="" 那么这个链接哪儿也去不了。

        7
  •  2
  •   Gabriel    3 年前

    你可以试试:

      <router-link
       :event="whateverActivatesThisLink ? 'click' : ''"
      >
      Go to page
      </router-link>
    

    或者编写一个更干净的代码:

      <router-link
      :event="handleWhatEverEvent"
      >
      Go to page
      </router-link>
    
    computed: {
      handleWhatEverEvent() {
        return this.whateverActivatesThisLink ? 'click' : '';
      }
    }
    
        8
  •  1
  •   ElizabethSetton    4 年前

    您可以为每条路线设置路线守卫

    const router = new VueRouter({
      routes: [
        {
          path: '/foo',
          component: Foo,
          beforeEnter: (to, from, next) => {
            //here you can set if condition 
            if (conditionTrue) {
              //redirect to other route
              next({path: '/bar'});
            } else {
              next();
            }
          }          
        }
      ]
    })
    

    或者你可以设置为全局

    routes: [
      {path: '/foo', component: Foo, meta:{conditionalRoute: true}}
    ]; 
    
    router.beforeEach((to, from, next) => { 
        if (to.matched.some(record => record.meta.conditionalRoute)) { 
            // this route requires condition/permission to be accessed
            if (!checkCondition ) { 
                //check condition is false
                next({ path: '/'});
            } else { 
                //check condition is true
                next();
            } 
        } else { 
            next(); // Don't forget next
        } 
    })
    

    欲了解更多信息: https://router.vuejs.org/guide/advanced/navigation-guards.html#global-before-guards

        9
  •  1
  •   yogee    3 年前

    因为我必须使用 <router-link> 通过自定义属性(并向路由添加自定义元),我可以这样解决它:

    <router-link :to="route.path"
                      custom
                      v-slot="{href, route, navigate, isActive, isExactActive}">
                    <a v-bind="$attrs"
                    :href="href"
                    @click="checkClick($event, navigate, route.meta)">
                    ...
                    <slot></slot>
                </a>
    </router-link>
    

    然后是函数

    checkClick(event: any, navigate: any, meta: { enabled: boolean }) {
                if (meta.enabled) {
                    navigate(event);
                    return;
                }
                event.preventDefault();
            },
    
        10
  •  0
  •   Foxlab    4 年前

    为了防止点击,您可以像这样直接访问router link元素的事件属性(并且可以使用本机点击来执行其他操作):

    <router-link 
    :event="clickable ? 'click' : ''" 
    @click.native="!clickable ? doOtherThing : ''" > Link </router-link>
    
        11
  •  0
  •   onewaveadrian    3 年前

    路由器v4的更新:

    使用 boolean 变量 status 确定链接是否处于活动状态并传递链接( ctalink )也是一个变量。

    从这里来 nuxt-link 随着更新而中断的实现,因此从经验来看,这同样有效。

        <router-link
          v-slot="{ navigate }"
          :to="ctalink"
          custom
        >
          <div @click="status ? navigate(ctalink) : null">
            <div :class="status ? 'text-green' : 'text-gray'"> 
              Click me when active 
            </div>
          </div>
        </router-link>
    

    资料来源: https://next.router.vuejs.org/api/#router-link-s-v-slot

        12
  •  0
  •   drocha87    3 年前

    NuxtLink(Vue路由器v4)

    对我来说,下面的代码就像一个符咒。这是我在应用程序中使用的真实代码 nuxt tailwind .

                  <nuxt-link
                    v-slot="{ navigate }"
                    :to="`lesson/${lesson.lesson_id}`"
                    append
                    custom
                  >
                    <button
                      class="focus:outline-none"
                      :class="{
                        'text-gray-500 cursor-default': !lesson.released,
                      }"
                      :disabled="!lesson.released"
                      @click="navigate"
                    >
                      {{ lesson.title }}
                    </button>
                  </nuxt-link>
    
        13
  •  0
  •   Baraja Swargiary    3 年前

    使用div元素或span元素代替 结合@click事件

    <div @click="handleRouteNavigation">
    your content..
    </div>
    

    脚本中的方法定义

    handleRouteNavigation(){
    
      if(conditionSatisfied){
          this.$router.push('/mylink')
       }
    
    }