vue设置页面标题title

最新推荐文章于 2024-06-19 13:57:42 发布

原创最新推荐文章于 2024-06-19 13:57:42 发布 · 975 阅读

0 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#vue #vue.js

js 同时被 2 个专栏收录

75 篇文章

订阅专栏

vue

49 篇文章

订阅专栏

本文介绍如何在Vue项目中根据不同页面动态设置浏览器标题，包括直接修改index.html中的title标签适用于所有页面使用相同标题的情况，以及通过路由元信息meta结合beforeEach导航守卫实现每个页面显示不同标题的方法。

vue设置页面标题title

每个页面设置相同标题

index.html

直接修改title标签里面的标题
(ps: 这个html文件中也可以引入一些js文件)

每个页面设置不同标题

router - index.js

const router = new Router({
    mode: 'history',
    routes: [
        {
            path: '/index',
            name: 'index',
            component: Index,
            meta:{
                // 页面标题title
                title: '首页'
            }
        },
        {
            path: '/content',
            name: 'content',
            component: Content,
            meta:{
                title: '内容'
            }
        }
    ]
})
export default router

main.js

import router from './router'
router.beforeEach((to, from, next) => {
  /* 路由发生变化修改页面title */
  if (to.meta.title) {
    document.title = to.meta.title
  }
  next()
})