关于 vue3 在自定义hook中出现的报错问题 （更新中）

一、关于在 JS 的文件中使用 vue-router

最近在结合 ElementUI 的 tag 组件，封装 vue3首部组件，需要在多个页面展示对应的路由名字和标签，利用 pinia 存储打开的路由信息，于是在 pinia 中访问当前路由信息

1.1 先介绍一下两个方法

1.1.1 useRouter

相当于 vue2 中的 this.$router 实例方法，可以使用路由的一些方法（如跳转push、无历史记录跳转 replace）

1.1.2 useRoute

相当于 vue2 中的 this.$route 实例方法,可以看到当前路由的 path、name、meta 等信息

2. 关于vue-router路由报错

在 JS 为后缀名的文件中使用一下代码出现报错

import {useRoute,useRouter} from "vue-router"

const $route = useRoute()
const $router = useRouter()

报错信息：

报错原因：

import { useRoute,useRouter } from “vue-router”，以及
useRoute，useRouter 它们的使用范围仅限于 vue 后缀名 文件的 setup 里面，只能在 setup 里面编译在其他地方使用会导致无法获取到数据
我猜可能是编译的问题

3. 解决方法

可以通过引入已经定义好的了路由实例对象（负责进行 vue-router 路由管理的文件），如下：

// 存储所有路由信息的文件
import Router from '../../router/index.js'

const $route = Router.currentRoute.value
const $router = Router

二、关于在 JS 的文件中使用 store

• 场景（可能必须少）

设置全局路由解析守卫时，需要使用 pinia 里面的方法

import { createRouter , createWebHashHistory} from "vue-router"
import { useNavStore } from "@/store/module/internal.js"

const router = createRouter({
   history:createWebHashHistory(),
   routes,
})

// 如果定义在外部的话会
// 报错 access 'useNavStore' before initialization
const navStore = useNavStore()  // 错误

router.beforeResolve((to,from) => {
   // 这个只能定义在这个位置，随着 vue 编译时开始定义
   const navStore = useNavStore()  // 正确

   const {name,fullPath} = to

   navStore.addNavRouter(name,fullPath)
})

• 解决方法
  尽量放在关于 vue 的函数内部使用，例如上面的 createRouter 等等里面定义，这样就会随着 vue 的运行原理，在编译时就会自然在vue中使用了