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) {

    document.title = to.meta.title + ' | 开发指南'

  } else if (to.query.title) {

    document.title = decodeURIComponent(to.query.title) + ' | 开发指南'

  }

  next()

})


export default router

©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

友情链接更多精彩内容