锐客网

  1. 首页 > it技术 > >

Vue|Vue 项目如何设置动态标题

1、常规做法就是使用Vue-Router的beforeEach拦截，首先在routers里面增加一个meta属性：


const router = new Router({
routers: [
{
path: 'pageList',
component: pageList,
meta: {
title: '文章管理'
}
]
})


2、 然后在路由文件 index.js 中给需要的路由添加 title，如果是某个详情页面需要显示当前详情的标题，可以在url里面添加一个参数，设置标题的时候从url里面获取。


router.beforeEach((to, from, next) => {
/* 路由发生变化修改页面title */
if (to.meta.title) {
【Vue|Vue 项目如何设置动态标题】document.title = to.meta.title + ' | 开发指南'
} else if (to.query.title) {
document.title = decodeURIComponent(to.query.title) + ' | 开发指南'
}
next()
})


export default router

    推荐阅读


    上一篇：相约美丽校园，协同备战中考——燕山中学九年级线上考试质量分析会暨二轮复习研讨会

    下一篇：刻意练习训练营感想（1）