文章阅读

沉浸阅读完整内容

写文章

vue中设置网页标题

正在统计阅读人数 正在统计字数
登录收藏0
字号 100%

1.在项目根目录中的 vue.config.js 文件中设置 title 字段,代码如下:

// vue.config.js
module.exports = {
  pages: {
    index: {
      entry: 'src/main.js',
      title: 'My App' //在这里修改应用程序的标题
    }
  }
}

在上面的示例代码中,我们将 title 字段设置为 "My App"。此时,如果您在浏览器中打开应用程序,将会看到浏览器标签页中显示的标题是 "My App"。
如果您希望在不同页面中显示不同的标题,可以使用 vue-router 提供的 meta 属性。例如:

// router.js
import Vue from 'vue'
import Router from 'vue-router'
import Home from './views/Home.vue'

Vue.use(Router)

const router = new Router({
  routes: [
    {
      path: '/',
      name: 'home',
      component: Home,
      meta: {
        title: '首页' // 修改页面标题
      }
    },
    //...其他路由省略
  ]
})

router.beforeEach((to, from, next) => {
  // 设置页面标题
  if (to.meta.title) {
    document.title = to.meta.title
  } else {
    document.title = 'My App' // 默认标题
  }
  next()
})

export default router

在上述代码中,我们在路由配置中添加了 meta 属性,并在 beforeEach 钩子函数中设置了页面的标题,这样就可以为不同的页面设置不同的标题了。

需要注意的是,由于在浏览器中,document.title 是全局变量,因此最好在每次切换路由时都设置一次标题,以确保应用程序的标题在每个页面上都正确显示。

推荐阅读

4 篇精选
文章 / 187vue-ueditor-wrap设置内容高度自动图片缩放问题 文章 / 186vue3中使用MAthJax入门教程2.x 文章 / 184Avue+vue2实现大型文件切片上传 文章 / 185vue3打包去掉全局console.log

发表评论

评论 0

还没有评论,欢迎留下第一条讨论。

分享精彩,传递价值

生成专属海报,分享你的文章,让更多人发现好内容

浏览器不支持 Canvas,无法生成海报。

每日签到

每天来这里,记录一点持续积累。

当前积分--积分
本月签到--
本月获得--积分
正在读取