原代码部分模块示例:有一个封装请求地址的模块api.ts:

import { useRouter } from "vue-router";
const router = useRouter();

let token = localStorage.getItem("token");
if (!token) {
    router.push("/login");
}

该router的使用会报警告inject() can only be used inside setup() or functional;原因在于useRouter只能在setup中使用,因此在模块中调用会出现警告,参考文档API Vue Router

解决办法:引入创建router的文件替换useRouter()!!!

解决办法:引入创建router的文件替换useRouter()!!!

解决办法:引入创建router的文件替换useRouter()!!!

引入示例:import router from "@/router/index.ts"。router使用方式不变,只是引入router的方式变了。

其中router/index.ts部分代码示例:

import { createRouter, createWebHashHistory} from "vue-router"
import type { RouteRecordRaw } from "vue-router"
import login from "@/views/login/index.vue"

const routes: Array<RouteRecordRaw> = [
    {
        path: "/login",
        name: "login",
        component: login,
    }
]

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

使用useStore同理。

Logo

基于 Vue 的企业级 UI 组件库和中后台系统解决方案,为数万开发者服务。

更多推荐