利用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