wzp/v3-admin-vite
Template
1
0
Fork 0
mirror of https://github.com/un-pany/v3-admin-vite.git synced 2025-04-21 11:29:20 +08:00
Code Issues Packages Projects Releases Wiki Activity

feat: 动态标题

Browse Source
This commit is contained in:
pany 2023-08-29 18:13:35 +08:00
parent 1ef54abc1e
commit 6593db0d21
9 changed files with 39 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
.env Normal file
View File

@ -0,0 +1,4 @@
# 所有环境自定义的环境变量（命名必须以 VITE_ 开头）
## 项目标题
VITE_APP_TITLE = V3 Admin Vite

2
.env.development
View File

@ -1,4 +1,4 @@
# 自定义的环境变量（命名必须以 VITE_ 开头）
# 开发环境自定义的环境变量（命名必须以 VITE_ 开头）
## 后端接口公共路径（如果解决跨域问题采用反向代理就只需写公共路径）
VITE_BASE_API = '/api/v1'

2
.env.production
View File

@ -1,4 +1,4 @@
# 自定义的环境变量（命名必须以 VITE_ 开头）
# 生产环境自定义的环境变量（命名必须以 VITE_ 开头）
## 后端接口公共路径（如果解决跨域问题采用 CORS 就需要写全路径）
# VITE_BASE_API = 'https://mock.mengxuegu.com/mock/63218b5fb4c53348ed2bc212/api/v1'

2
.env.staging
View File

@ -1,4 +1,4 @@
# 自定义的环境变量（命名必须以 VITE_ 开头）
# 预发布环境自定义的环境变量（命名必须以 VITE_ 开头）
## 后端接口公共路径（如果解决跨域问题采用 CORS 就需要写全路径）
# VITE_BASE_API = 'https://mock.mengxuegu.com/mock/63218b5fb4c53348ed2bc212/api/v1'

4
index.html
View File

@ -1,11 +1,11 @@
<!DOCTYPE html>
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="icon" href="/favicon.ico" />
<link rel="stylesheet" href="/app-loading.css" />
<title>V3 Admin Vite</title>
<title>%VITE_APP_TITLE%</title>
</head>
<body>
<div id="app">

23
src/hooks/useTitle.ts Normal file
View File

@ -0,0 +1,23 @@
import { ref, watch } from "vue"
/** 项目标题 */
const VITE_APP_TITLE = import.meta.env.VITE_APP_TITLE ?? "V3 Admin Vite"
/** 动态标题 */
const dynamicTitle = ref<string>("")
/** 设置标题 */
const setTitle = (title?: string) => {
dynamicTitle.value = title ? `${VITE_APP_TITLE} | ${title}` : VITE_APP_TITLE
}
/** 监听标题变化 */
watch(dynamicTitle, (value, oldValue) => {
if (document && value !== oldValue) {
document.title = value
}
})
export function useTitle() {
return { setTitle }
}

4
src/router/index.ts
View File

@ -71,7 +71,7 @@ export const constantRoutes: RouteRecordRaw[] = [
component: () => import("@/views/unocss/index.vue"),
name: "UnoCSS",
meta: {
title: "unocss",
title: "原子 CSS",
svgIcon: "unocss"
}
}
@ -207,7 +207,7 @@ export const constantRoutes: RouteRecordRaw[] = [
redirect: "/hook-demo/use-fetch-select",
name: "HookDemo",
meta: {
title: "hook 示例",
title: "Hook 示例",
elIcon: "Menu",
alwaysShow: true
},

5
src/router/permission.ts
View File

@ -3,6 +3,7 @@ import { useUserStoreHook } from "@/store/modules/user"
import { usePermissionStoreHook } from "@/store/modules/permission"
import { ElMessage } from "element-plus"
import { setRouteChange } from "@/hooks/useRouteListener"
import { useTitle } from "@/hooks/useTitle"
import { getToken } from "@/utils/cache/cookies"
import { fixBlankPage } from "@/utils/fix-blank-page"
import routeSettings from "@/config/route"
@ -10,6 +11,7 @@ import isWhiteList from "@/config/white-list"
import NProgress from "nprogress"
import "nprogress/nprogress.css"
const { setTitle } = useTitle()
NProgress.configure({ showSpinner: false })
router.beforeEach(async (to, _from, next) => {
@ -73,6 +75,7 @@ router.afterEach((to) => {
setRouteChange(to)
})
router.afterEach(() => {
router.afterEach((to) => {
setTitle(to.meta.title)
NProgress.done()
})

1
types/env.d.ts vendored
View File

@ -1,5 +1,6 @@
/** 声明 vite 环境变量的类型（如果未声明则默认是 any） */
declare interface ImportMetaEnv {
readonly VITE_APP_TITLE: string
readonly VITE_BASE_API: string
readonly VITE_ROUTER_HISTORY: "hash" | "html5"
readonly VITE_PUBLIC_PATH: string