【vue-router源码】十二、useRoute、useRouter、useLink源码分析

MAXLZ

前言

【vue-router源码】系列文章将带你从0开始了解 vue-router 的具体实现。该系列文章源码参考 vue-router v4.0.15 。
源码地址： https:// github.com/vuejs/router
阅读该文章的前提是你最好了解 vue-router 的基本使用，如果你没有使用过的话，可通过 vue-router官网学习下。

该篇文章将分析 useRoute 、 useRouter 、 useLink 的实现。

使用

<script lant="ts" setup>
import { useRouter, useRoute } from 'vue-router'
// router为创建的router实例
const router = useRouter()
// currentRoute当前路由
const currentRoute = useRoute()
</script>

使用 useLink 可以自定义我们自己的 RouterLink ，如下面自定的 MyRouterLink ，如果是外部链接，我们需要让它新打开一个页面。 ¨G1G MyRouterLink 使用： ¨G2G ¨K9K ¨G3G useRouter 和 useRoute 都是使用 inject 来进行获取对应值。对应值都是在 install 过程中注入的。 ¨G4G ¨K10K ¨G5G 在进行路由跳转时，一些特殊情况下是不能跳转的，这些情况包括： <ol> <li>按住了window ⊞ （MAC的 commond ）键、 alt 键、 ctrl 键、 shift 键中的任一键</li> <li>调用过 e.preventDefault() </li> <li>右键</li> <li> target='_blank'`

function guardEvent(e: MouseEvent) {
  // don't redirect with control keys
  if (e.metaKey || e.altKey || e.ctrlKey || e.shiftKey) return
  // don't redirect when preventDefault called
  if (e.defaultPrevented) return
  // don't redirect on right click
  if (e.button !== undefined && e.button !== 0) return
  // don't redirect if `target="_blank"`
  // @ts-expect-error getAttribute does exist
  if (e.currentTarget && e.currentTarget.getAttribute) {
    // @ts-expect-error getAttribute exists
    const target = e.currentTarget.getAttribute('target')
    if (/\b_blank\b/i.test(target)) return