feat: Set document title via route meta (#131)

Author: cwandev

src/constants/index.ts

@@ -0,0 +1,2 @@
+export const appName = 'vue3-vant-mobile'
+export const appDescription = 'An mobile web apps template based on the Vue 3 ecosystem'

src/router/index.ts

@@ -7,7 +7,9 @@ import 'nprogress/nprogress.css'
 import type { EnhancedRouteLocation } from './types'
 import useRouteCacheStore from '@/stores/modules/routeCache'
 import { useUserStore } from '@/stores'
+
 import { isLogin } from '@/utils/auth'
+import setPageTitle from '@/utils/set-page-title'
 
 NProgress.configure({ showSpinner: true, parent: '#app' })
 
@@ -30,6 +32,9 @@ router.beforeEach(async (to: EnhancedRouteLocation, _from, next) => {
   // Route cache
   routeCacheStore.addRoute(to)
 
+  // Set page title
+  setPageTitle(to.meta.title)
+
   if (isLogin() && !userStore.userInfo?.uid)
     await userStore.info()
 

src/utils/set-page-title.ts

@@ -0,0 +1,5 @@
+import { appName } from '@/constants'
+
+export default function setPageTitle(title?: string): void {
+  window.document.title = title ? `${title} - ${appName}` : appName
+}