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

前言

【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`，如果是外部链接，我们需要让它新打开一个页面。

<template>
<a

v-if="isExternalLink"
v-bind="$attrs"
:class="classes"
:href="to"
target="_blank"

<slot />

<a

v-else
v-bind="$attrs"
:class="classes"
:href="href"
@click="navigate"

<slot />

</template>

<script lang="ts">
export default {
name: 'MyRouterLink',
}
</script>

<script lang="ts" setup>
import { useLink, useRoute, RouterLink } from 'vue-router'
import { computed } from 'vue'

const props = defineProps({
// @ts-ignore
...RouterLink.props
})

const { route, href, navigate, isActive, isExactActive } = useLink(props)

const isExternalLink= computed(() => typeof props.to === 'string' && props.to.startsWith('http'))

const currentRoute = useRoute()

const classes = computed(() => ({
'router-link-active':

isActive.value || currentRoute.path.startsWith(route.value.path),

'router-link-exact-active':

isExactActive.value || currentRoute.path === route.value.path,

}))
</script>

`MyRouterLink`使用：

<my-router-link to="https://www.xxx.com">MyRouterLink External Link</my-router-link>
<my-router-link to="/home">MyRouterLink /home</my-router-link>

# useRouter、useRoute

export function useRouter(): Router {
return inject(routerKey)!
}

export function useRoute(): RouteLocationNormalizedLoaded {
return inject(routeLocationKey)!
}

`useRouter`和`useRoute`都是使用`inject`来进行获取对应值。对应值都是在`install`过程中注入的。

install(app) {
// ...
app.provide(routerKey, router)
app.provide(routeLocationKey, reactive(reactiveRoute))
// ...
}

# useLink

export function useLink(props: UseLinkOptions) {
// router实例
const router = inject(routerKey)!
// 当前路由地址
const currentRoute = inject(routeLocationKey)!

// 目标路由相关信息
const route = computed(() => router.resolve(unref(props.to)))

// 被激活记录的索引
const activeRecordIndex = computed<number>(() => {

const { matched } = route.value
const { length } = matched
// 目标路由所匹配到的完整路由
const routeMatched: RouteRecord | undefined = matched[length - 1]
const currentMatched = currentRoute.matched
// 如果没有匹配到的目标路由或当前路由也没有匹配到的路由返回-1
if (!routeMatched || !currentMatched.length) return -1
// 在当前路由所匹配到的路由中寻找目标路由
const index = currentMatched.findIndex(
  isSameRouteRecord.bind(null, routeMatched)
)
if (index > -1) return index
// 目标路由匹配到的路由的父路由的path（如果父路由是由别名产生，取源路由的path）
const parentRecordPath = getOriginalPath(
  matched[length - 2] as RouteRecord | undefined
)
return (
  length > 1 &&
    // 如果目标路由的父路由与
    getOriginalPath(routeMatched) === parentRecordPath &&
    // 避免将孩子与父路由比较
    currentMatched[currentMatched.length - 1].path !== parentRecordPath
    ? currentMatched.findIndex(
        isSameRouteRecord.bind(null, matched[length - 2])
      )
    : index
)

})

// 当前router-link是否处于激活状态，activeRecordIndex大于-1并且，当前路由的params与目标路由的params相同
const isActive = computed<boolean>(

() =>
  activeRecordIndex.value > -1 &&
  includesParams(currentRoute.params, route.value.params)

)
// 是否完全匹配，目标路由必须和当前路由所匹配到的路由最后一个相同
const isExactActive = computed<boolean>(

() =>
  activeRecordIndex.value > -1 &&
  activeRecordIndex.value === currentRoute.matched.length - 1 &&
  isSameRouteLocationParams(currentRoute.params, route.value.params)

)

// 利用push或replace进行路由跳转
function navigate(

e: MouseEvent = {} as MouseEvent

): Promise<void | NavigationFailure> {

// 对于一些特殊情况，不能进行跳转
if (guardEvent(e)) {
  return router[unref(props.replace) ? 'replace' : 'push'](
    unref(props.to)
  ).catch(noop)
}
return Promise.resolve()

}

// devtools only
if ((__DEV__ || __FEATURE_PROD_DEVTOOLS__) && isBrowser) {

// ...

}

return {

route,
href: computed(() => route.value.href),
isActive,
isExactActive,
navigate,

}
}

在进行路由跳转时，一些特殊情况下是不能跳转的，这些情况包括：
1. 按住了window`⊞`（MAC的`commond`）键、`alt`键、`ctrl`键、`shift`键中的任一键
2. 调用过`e.preventDefault()`
3. 右键
4. `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

}
// this may be a Weex event which doesn't have this method
if (e.preventDefault) e.preventDefault()

return true
}