Vue3 关于router引起的[Vue warn]: inject() can only be used inside setup() or functional

原代码部分模块示例:有一个封装请求地址的模块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同理。

评论 5
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值