vue-router设置标题

利用vue-router可以开发单页面应用，但实际中每个视图都有自己的title名，这就要领用router的beforeEach去统一设置了

import * as VueRouter from 'vue-router'
// 1. 定义路由组件.
// 也可以从其他文件导入
import Login from '/src/pages/Login.vue'
import Applicant from  '/src/pages/Applicant.vue'
import Index from '/src/pages/Index.vue'
import UserLogin from '/src/pages/UserLogin.vue'
import UserRegister from '/src/pages/UserRegister.vue'


// 2. 定义一些路由
// 每个路由都需要映射到一个组件。
// 我们后面再讨论嵌套路由。
const routes = [
    { path: '/login', component: Login,meta:{title:"管理员登录"} },
    { path: '/applicant', component: Applicant , meta: {title: "报名首页"}},
    { path: '/index', component: Index ,meta: {title: "首页~人工智能实验室欢迎你！"}},
    { path: '/user/login', component: UserLogin ,meta: {title: "普通用户登录"}},
    { path: '/user/register', component: UserRegister ,meta: {title: "注册"}},
]

// 3. 创建路由实例并传递 `routes` 配置
// 你可以在这里输入更多的配置，但我们在这里
// 暂时保持简单
const router = VueRouter.createRouter({
    // 4. 内部提供了 history 模式的实现。为了简单起见，我们在这里使用 hash 模式。
    history: VueRouter.createWebHashHistory(),
    routes, // `routes: routes` 的缩写
})

router.beforeEach((to, from, next) => {//beforeEach是router的钩子函数，在进入路由前执行
    if (to.meta.title) {//判断是否有标题
        // @ts-ignore
        document.title = to.meta.title
    }
    next()//执行进入路由，如果不写就不会进入目标页
})


export default router