Vue项目router-link在App.vue生效但子组件内点击无响应问题

根组件App.vue里的router-link能正常跳转，子组件里的点击无响应，按优先级从高到低排查以下问题即可：

• 点击事件被UI组件拦截
  你子组件里的router-link包裹的是Vuetify的<v-icon>，Vuetify部分版本的图标、抽屉类组件会默认拦截内部元素的默认点击行为，导致router-link绑定的跳转逻辑根本不会触发。
  最快的解决方式是去掉外层失效的router-link，直接给图标绑定点击事件，手动调用路由方法跳转：

  <!-- navigationdrawer.vue 调整后代码 -->
  <v-icon @click="$router.push('/test')">{{ item.icon }}</v-icon>
  

  90%以上的同类问题都是这个原因导致的，优先试这个方案。
• 子组件脱离路由注入上下文
  如果你自定义的navigation-drawer组件是通过Teleport传送到了body节点、或者是手动独立挂载的，会脱离Vue应用根实例的作用域，拿不到全局注入的路由实例，router-link渲染后不会绑定跳转逻辑。
  排查方式：在子组件的挂载钩子里打印路由实例，选项式API打印this.$router，组合式API打印useRouter()的返回值，如果结果是undefined就说明注入失效，调整组件挂载位置，确保它在应用根组件的渲染树内即可。
• 元素样式遮挡
  打开浏览器开发者工具，用元素选择器点击你页面上图标所在的位置，看实际选中的是不是router-link渲染的a标签。如果选中的是其他透明遮罩层、或者抽屉的蒙层元素，说明点击事件根本没落到router-link上。
  这种情况调整元素z-index层级，去掉遮挡的元素，或者删掉router-link/v-icon上可能存在的pointer-events: none样式即可。
• 组件命名冲突
  你自定义的组件名是navigation-drawer，和Vuetify内置的v-navigation-drawer组件命名空间如果产生冲突，会导致组件渲染异常，内部的router-link没有被正确编译。把自定义组件改个名字，比如<app-nav-drawer>就能解决。

注意：Vue2环境下如果要给套在组件里的router-link绑定原生事件，需要加.native修饰符，否则事件不会绑定到原生DOM节点上，也会出现点击无响应的问题。

内容的提问来源于stack exchange，提问作者Mark