fix: remove appRouter hook

src/components/common/ErrorTip.vue

@@ -1,12 +1,9 @@
 <script setup lang="ts">
-import { useAppRouter } from '@/hooks'
-
-type TipType = '403' | '404' | '500'
 defineProps<{
   /** 异常类型 403 404 500 */
-  type: TipType
+  type: '403' | '404' | '500'
 }>()
-const { toRoot } = useAppRouter()
+const router = useRouter()
 </script>
 
 <template>
@@ -31,11 +28,9 @@ const { toRoot } = useAppRouter()
     >
     <n-button
       type="primary"
-      @click="toRoot"
+      @click="router.push('/')"
     >
       回到首页
     </n-button>
   </div>
 </template>
-
-<style lang="scss" scoped></style>

src/components/common/appLoading.vue

@@ -1,7 +1,5 @@
 <script setup lang="ts">
-import { useAppInfo } from '@/hooks'
-
-const { name } = useAppInfo()
+const name = import.meta.env.VITE_APP_NAME
 </script>
 
 <template>

src/hooks/index.ts

@@ -1,4 +1,3 @@
-export * from './useAppRouter'
 export * from './useBoolean'
 export * from './useLoading'
 export * from './useEcharts'

src/hooks/useAppRouter.ts

@@ -1,58 +0,0 @@
-import type { RouteLocationRaw } from 'vue-router'
-import { router as gobalRouter } from '@/router'
-
-/**
- * @description: 全局路由方法，vue-router自带的useRouter，在根目录下不能用
- * @param {*} isSetup
- * @return {*}
- */
-export function useAppRouter(isSetup = true) {
-  const router = isSetup ? useRouter() : gobalRouter
-  const route = router.currentRoute
-
-  /* 路由跳转方法 */
-  async function routerPush(to: RouteLocationRaw) {
-    await router.push(to)
-  }
-
-  /* 路由跳转方法 */
-  async function routerReplace(to: RouteLocationRaw) {
-    await router.replace(to)
-  }
-
-  /* 前进后退方法 */
-  function routerGo(delta: number) {
-    router.go(delta)
-  }
-
-  /* 跳转根页方法 */
-  async function toRoot() {
-    await routerPush({ path: '/appRoot' })
-  }
-  /* 跳转至登录页 */
-  async function toLogin(redirectUrl?: string) {
-    const redirect = redirectUrl || route.value.fullPath
-    const targetUrl = {
-      name: 'login',
-      query: { redirect },
-    }
-    await routerPush(targetUrl)
-  }
-  /* 跳转重定向方法 */
-  async function toLoginRedirect() {
-    const { query } = route.value
-    if (query?.redirect)
-      await routerPush(query.redirect as string)
-    else
-      await toRoot()
-  }
-
-  return {
-    routerPush,
-    routerReplace,
-    routerGo,
-    toRoot,
-    toLogin,
-    toLoginRedirect,
-  }
-}

src/hooks/useSystem.ts

@@ -1,20 +1,6 @@
 import { isArray, isString } from 'radash'
 import { useAuthStore } from '@/store'
 
-interface AppInfo {
-  /** 项目名称 */
-  name: string
-}
-
-/** 项目信息 */
-export function useAppInfo(): AppInfo {
-  const { VITE_APP_NAME: name } = import.meta.env
-
-  return {
-    name,
-  }
-}
-
 /** 权限判断 */
 export function usePermission() {
   const authStore = useAuthStore()

src/layouts/components/sider/Logo.vue

@@ -1,16 +1,16 @@
 <script setup lang="ts">
 import { useAppStore } from '@/store'
-import { useAppInfo, useAppRouter } from '@/hooks'
 
-const { name } = useAppInfo()
-const { toRoot } = useAppRouter()
+const router = useRouter()
 const appStore = useAppStore()
+
+const name = import.meta.env.VITE_APP_NAME
 </script>
 
 <template>
   <div
     class="h-60px text-2xl flex-center overflow-hidden cursor-pointer"
-    @click="toRoot"
+    @click="router.push('/')"
   >
     <SvgIcon
       name="logo"

src/layouts/components/tab/TabBar.vue

@@ -1,16 +1,14 @@
 <script setup lang="ts">
 import type { RouteLocationNormalized } from 'vue-router'
 import { useAppStore, useTabStore } from '@/store'
-import { useAppRouter } from '@/hooks'
 import { renderIcon } from '@/utils'
 
 const tabStore = useTabStore()
 const appStore = useAppStore()
 
-const { routerPush, toRoot } = useAppRouter()
-
+const router = useRouter()
 function handleTab(route: RouteLocationNormalized) {
-  routerPush(route.path)
+  router.push(route.path)
 }
 function handleClose(name: string) {
   tabStore.closeTab(name)
@@ -107,7 +105,7 @@ function onClickoutside() {
         v-for="item in tabStore.inherentTab"
         :key="item.path"
         :name="item.name"
-        @click="toRoot"
+        @click="router.push('/')"
       >
         {{ item.title }}
       </n-tab>

src/router/guard/permission.ts

@@ -8,7 +8,6 @@ export async function createPermissionGuard(
   next: NavigationGuardNext,
 ) {
   const routeStore = useRouteStore()
-
   // 判断有无TOKEN,登录鉴权
   const isLogin = Boolean(local.get('token'))
   if (!isLogin) {
@@ -26,23 +25,27 @@ export async function createPermissionGuard(
   if (!routeStore.isInitAuthRoute) {
     await routeStore.initAuthRoute()
     // 动态路由加载完回到根路由
-    if (to.name === '404' && to.redirectedFrom) {
+    if (to.name === '404') {
       // 等待权限路由加载好了，回到之前的路由,否则404
-      const path = to.redirectedFrom?.fullPath
-      next({ path, replace: true, query: to.query, hash: to.hash })
+      next({
+        path: to.fullPath,
+        replace: true,
+        query: to.query,
+        hash: to.hash,
+      })
       return false
     }
   }
 
   // 权限路由已经加载，仍然未找到，重定向到404
-  // if (to.name === '404') {
-  //   next({ name: '404', replace: true });
-  //   return false;
-  // }
+  if (to.name === '404') {
+    next({ name: '404', replace: true })
+    return false
+  }
 
   // 判断当前页是否在login,则定位去首页
   if (to.name === 'login') {
-    next({ path: '/appRoot' })
+    next({ path: '/' })
     return false
   }
 

src/store/auth.ts

@@ -1,7 +1,6 @@
 import { useRouteStore } from './route'
 import { fetchLogin, fetchUserInfo } from '@/service'
 import { router } from '@/router'
-import { useAppRouter } from '@/hooks'
 import { local } from '@/utils'
 
 const emptyInfo: Auth.UserInfo = {
@@ -30,15 +29,20 @@ export const useAuthStore = defineStore('auth-store', {
     /* 登录退出，重置用户信息等 */
     async resetAuthStore() {
       const route = unref(router.currentRoute)
-      const { toLogin } = useAppRouter(false)
       // 清除本地缓存
       this.clearAuthStorage()
       // 清空路由、菜单等数据
       const routeStore = useRouteStore()
       routeStore.resetRouteStore()
       this.$reset()
-      if (route.meta.requiresAuth)
-        await toLogin()
+      if (route.meta.requiresAuth) {
+        router.push({
+          name: 'login',
+          query: {
+            redirect: route.fullPath,
+          },
+        })
+      }
     },
     clearAuthStorage() {
       local.remove('token')
@@ -72,8 +76,11 @@ export const useAuthStore = defineStore('auth-store', {
       // 登录写入信息成功
       if (catchSuccess) {
         // 进行重定向跳转
-        const { toLoginRedirect } = useAppRouter(false)
-        await toLoginRedirect()
+        const route = unref(router.currentRoute)
+        const query = route.query as { redirect: string }
+        router.push({
+          path: query.redirect || '/',
+        })
 
         // 触发用户提示
         window.$notification?.success({
@@ -106,8 +113,5 @@ export const useAuthStore = defineStore('auth-store', {
 
       return catchSuccess
     },
-    async toggleUserRole(role: Auth.RoleType) {
-      await this.login(role, '123456')
-    },
   },
 })

src/store/route.ts

@@ -123,16 +123,16 @@ export const useRouteStore = defineStore('route-store', {
       if (!userInfo || !userInfo.id)
         return
 
-      const { data: routes } = await fetchUserRoutes({
+      const { data } = await fetchUserRoutes({
         id: userInfo.id,
       })
 
-      if (!routes)
+      if (!data)
         return
       // 根据用户返回的路由表来生成真实路由
-      const appRoutes = createDynamicRoutes(routes)
+      const appRoutes = createDynamicRoutes(data)
       // 生成侧边菜单
-      this.createMenus(routes)
+      this.createMenus(data)
       // 插入路由表
       router.addRoute(appRoutes)
     },

src/store/tab.ts

@@ -1,5 +1,5 @@
 import type { RouteLocationNormalized } from 'vue-router'
-import { useAppRouter } from '@/hooks'
+import { router } from '@/router'
 
 interface TabState {
   inherentTab: {
@@ -50,7 +50,6 @@ export const useTabStore = defineStore('tab-store', {
       this.tabs.push(route)
     },
     async closeTab(name: string) {
-      const { routerPush, toRoot } = useAppRouter(false)
       const tabsLength = this.tabs.length
       // 如果动态标签大于一个,才会标签跳转
       if (this.tabs.length > 1) {
@@ -60,11 +59,11 @@ export const useTabStore = defineStore('tab-store', {
         // 如果是关闭的当前页面，路由跳转到原先标签的后一个标签
         if (this.currentTab === name && !isLast) {
           // 跳转到后一个标签
-          await routerPush(this.tabs[index + 1].path)
+          router.push(this.tabs[index + 1].path)
         }
         else if (this.currentTab === name && isLast) {
           // 已经是最后一个了，就跳转前一个
-          await routerPush(this.tabs[index - 1].path)
+          router.push(this.tabs[index - 1].path)
         }
       }
       // 删除标签
@@ -73,7 +72,7 @@ export const useTabStore = defineStore('tab-store', {
       })
       // 删除后如果清空了，就跳转到默认首页
       if (tabsLength - 1 === 0)
-        await toRoot()
+        router.push('/')
     },
 
     closeOtherTabs(name: string) {
@@ -89,9 +88,8 @@ export const useTabStore = defineStore('tab-store', {
       this.tabs = this.tabs.filter((item, i) => i <= index)
     },
     async closeAllTabs() {
-      const { toRoot } = useAppRouter(false)
       this.tabs.length = 0
-      await toRoot()
+      router.push('/')
     },
 
     hasExistTab(name: string) {

src/views/permission/permission/index.vue

@@ -7,13 +7,17 @@ const { hasPermission } = usePermission()
 const { role } = authStore.userInfo
 
 const roleList: Auth.RoleType[] = ['super', 'admin', 'user']
+
+function toggleUserRole(role: Auth.RoleType) {
+  authStore.login(role, '123456')
+}
 </script>
 
 <template>
   <n-card title="权限示例">
     <n-h1> 当前权限：{{ role }}</n-h1>
     <n-button-group>
-      <n-button v-for="item in roleList" :key="item" type="default" @click="authStore.toggleUserRole(item)">
+      <n-button v-for="item in roleList" :key="item" type="default" @click="toggleUserRole(item)">
         {{ item }}
       </n-button>
     </n-button-group>

src/views/test/test2/index.vue

@@ -1,13 +1,11 @@
 <script setup lang="ts">
-import { useAppRouter } from '@/hooks'
-
-const { routerPush } = useAppRouter()
+const router = useRouter()
 </script>
 
 <template>
   <div text-center>
     这个页面包含了一个不在侧边菜单的详情页面
-    <n-button @click="routerPush('/test/test2/detail')">
+    <n-button @click="router.push('/test/test2/detail')">
       跳转详情子页
     </n-button>
   </div>