Vue2.7 封装 Router@4 的 hook

1、问题

在 Vue2.7 中，尤大大是支持大部分 Vue3 的功能，并且支持使用 CompositionAPI 的写法，也支持 script setup 的便捷语法，但是 Vue2 对应的 Vue-router@3 库并没有提供 hook 对应的支持，所以需要我们自行封装 Vue-router@4 提供的两个 hook

2、封装

TS 版本：

/* 封装 hook, Vue-router@3 没有兼容 Vue2 版本相关的 hook */
import VueRouter, { Route } from "vue-router";
import { getCurrentInstance } from "vue"

export const useRoute = () => {
  let vm = getCurrentInstance()?.proxy
  return vm?.$route as Route
}

export const useRouter = () => {
  let vm = getCurrentInstance()?.proxy
  return vm?.$router as VueRouter
}
1
2
3
4
5
6
7
8
9
10
11
12
13

3、打个广告

使用 @mazp/create-tpl 快速生成 Vite + React、Vue2、Vue3 对应的项目，可选择 TS 或者 JS 版本，开箱即用❤️，无需再手动配置。Github 地址点击这里，欢迎使用或者提建议，一起优化该脚手架

Vite 开发体验，像🚀一样快速

Vue2最近优化过，中大型项目支持，内置了 Vue-router 和 Pinia