单击时隐藏VueJs中的导航链接

在Vue.js中隐藏导航链接可以通过以下步骤实现：

首先，在Vue组件中找到包含导航链接的HTML元素，通常是使用<router-link>标签或<a>标签来创建导航链接。
使用Vue的条件渲染指令v-if或v-show来控制导航链接的显示与隐藏。这两个指令的区别在于，v-if会完全从DOM中移除元素，而v-show只是通过CSS的display属性来控制元素的可见性。
在需要隐藏导航链接的条件下，将v-if或v-show指令添加到导航链接的HTML元素上，并设置条件为false，即隐藏导航链接。

以下是一个示例代码：

<template>
  <div>
    <router-link to="/home" v-if="showNav">Home</router-link>
    <router-link to="/about" v-if="showNav">About</router-link>
    <router-link to="/contact" v-show="showNav">Contact</router-link>
  </div>
</template>

<script>
export default {
  data() {
    return {
      showNav: true, // 控制导航链接的显示与隐藏
    };
  },
};
</script>

在上述示例中，通过showNav变量控制导航链接的显示与隐藏。当showNav为true时，<router-link>元素会被渲染并显示在页面上；当showNav为false时，<router-link>元素会被移除或隐藏。

这种方式可以用于根据特定条件动态隐藏导航链接，例如根据用户登录状态、用户权限等。