创新系列-既要保留＜a/＞标签右键功能， 又不要href导致点击页面刷新， 希望click实现vue-router跳转

发布时间：2024/05/22
如果您有适合我的项目机会给到我，这是我的简历：Resume

思路：

思路原理：实践发现href为null或者" "的时候是不起作用的

1. 将href属性绑定的固定路径设置为响应式数据变量a，a初始值为null or " "
2. 利用鼠标事件之鼠标右键事件【oncontextmenu】将href绑定的变量a设置为 path路径值
3. 利用鼠标事件之鼠标按下事件【mousedown】将a的值先设置为null or " ",这时候href就不起作用了，再利用vue-router的push方式实现路由跳转。

友情提示：我的代码特殊性在于用的route模式是hash 不是传统的history 且使用是vue3和typescript，读者自行调试，思路是没问题的。

代码：

html

<a
  @contextmenu="contextmenu(item)"
  @mousedown="menuItemMouseDown(item)"
  :href="a"
>
  {{ item.meta.title }}
</a>

typescript or javascript

const a = ref("");//将设置为响应式数据
const menuItemMouseDown = (item: any) => {
  a.value = "";//先将a设置为空
  router.push(item.path);//在通过vue-router 的push方法实现内部路由跳转
};
const contextmenu = (item: any) => {
  a.value = "/#/" + item.path;
};