我有一个使用 vue 创建的单页应用程序，导航链接全部使用 router-link 标签完成。导航中有几项我的老板想在导航中添加但已禁用，以便人们可以一睹即将推出的一些功能。但是我不知道如何完全禁用路由器链接！
preventDefault 什么都不做，@click.native.prevent="stopClick()" 什么都不做（我尝试将它发送到一个函数以查看是否会阻止点击，但它只是调用函数和路由，尽管阻止），添加一个 disabled 类并设置 pointer-events: none; 的 css 规则什么都不做。我不确定还有什么可以尝试的，这是使禁用的链接成为正常文本而不是路由器链接的唯一方法吗？
【问题讨论】：
标签： javascript vue.js vue-router routerlink
今天仍然没有原生解决方案。但是在 vue-router repo 上有一个公开的 PR：https://github.com/vuejs/vue-router/pull/2098。
一种解决方法是使用：
<router-link
:disabled="!whateverActivatesThisLink"
:event="whateverActivatesThisLink ? 'click' : ''"
to="/link"
>
/link
</router-link>
【讨论】：
你可以使用
<router-link
:is="isDisabled ? 'span' : 'router-link'"
to="/link"
>
/link
</router-link>
【讨论】：
我认为这个问题没有合适的解决方案，因为路由器链接没有disabled 属性，但一个技巧是使用tag="button" 来添加所需的属性，如下所示：
<router-link
to="/link"
tag="button"
:disabled="true"
>
Link
</router-link>
【讨论】：
router-link呈现为html锚标签，而<a>也不支持禁用属性。添加tag="button" 将使routerlink 呈现为按钮，因此该按钮自然可以与:disabled 一起使用。
没有内置任何东西，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 样式。
【讨论】：
诀窍是在捕获阶段处理事件并阻止它向上传播。
<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;
};
}
<router-link
to="/path"
event
>
Go to page
</router-link>
<a>标签<a :href="$router.resolve(route).href">
Go to page
</a>
路由可以与您传递给router-link 上的to 道具的东西完全相同。
【讨论】：
event.preventDefault() 而不是 event.stopPropagation() 为我禁用了路由器链接
只需设置to="" 然后链接就不会去任何地方。
【讨论】：
您可以为每个路由设置路由保护
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
【讨论】：
你可以试试：
<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' : '';
}
}
【讨论】：
为了防止点击，您可以像这样直接访问 router-link 元素的事件属性（您可以使用原生点击来做其他事情）：
<router-link
:event="clickable ? 'click' : ''"
@click.native="!clickable ? doOtherThing : ''" > Link </router-link>
【讨论】：
使用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>
【讨论】：
对我来说，下面的代码很有吸引力。这是我在应用程序中使用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>
【讨论】：
使用 div 元素或 span 元素代替 结合@click事件
<div @click="handleRouteNavigation">
your content..
</div>
在脚本方法中定义
handleRouteNavigation(){
if(conditionSatisfied){
this.$router.push('/mylink')
}
}
【讨论】：
由于我必须使用 <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();
},
【讨论】：