Когда мы создаем новый проект vue в версии 3, мы получаем такой файл index.html:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <link rel="icon" href="/favicon.ico"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Vite App</title> </head> <body> <div id="app"></div> <script type="module" src="/src/main.ts"></script> </body> </html>
Наша титульная страница на каждой отдельной странице: «Vite App». Как мы можем установить собственный заголовок страницы для каждой определенной страницы без каких-либо дополнительных пакетов? Очевидно, нам нужен vue router.
Давайте создадим маршруты для нашего приложения:
import { createRouter, createWebHistory } from 'vue-router' const router = createRouter({ history: createWebHistory(import.meta.env.BASE_URL), routes: [ { path: '/', name: 'home', component: () => import("@/layouts/Panel.vue"), redirect: '/home', children: [ { path: '/home', component: () => import("@/views/HomeView.vue"), meta: { pageTitle: "Home" } }, { path: '/departments', component: () => import("@/views/departments/List.vue"), meta: { pageTitle: "Departments" } }, ] }, ] }); export default router
В мете мы можем определить дополнительное поле для нашего маршрутизатора, такое как pageTitle, хлебные крошки и т. д.
Перед экспортом маршрутизатора по умолчанию мы должны добавить этот фрагмент кода:
router.beforeEach((to, from, next) => { document.title = `${to.meta.pageTitle} - ${import.meta.env.VITE_APP_NAME}`; next(); });
Кроме того, мы можем добавить к заголовку страницы название нашего приложения. Нам нужно определить его в файле .env
VITE_APP_NAME="Department App"
Вот и все :)
PS:
Не забудьте подписаться на мой аккаунт.