Vue 中设置浏览器的 title 跟随路由的名称变化

最新推荐文章于 2024-05-13 16:26:52 发布

小火车况且况且

最新推荐文章于 2024-05-13 16:26:52 发布

阅读量7.8k

点赞数 6

分类专栏： Vue

本文链接：https://blog.csdn.net/weixin_43972992/article/details/102657462

版权

Vue 专栏收录该内容

78 篇文章 3 订阅

订阅专栏

Vue 中设置浏览器的 title 跟随路由的名称变化

在这里插入图片描述

浏览器title的变化会根据路由的变化而改变

可以先设置一个公共的文件夹setting, 用于存放公共的名称, 例如这里的 `小火车况且况且

module.exports = {
    title : "小火车况且况且"
}

这里主要是在路由中拦截

document.title 用于设置浏览器的 title

// 导入公共文件
import defaultSetting from "@/setting"
router.beforeEach((to, from, next) => {
    // 用于设置 浏览器的 title 显示
    if (to.meta.title) {
		document.title = `${to.meta.title}-${defaultSetting .title}`
	} else {
		document.title = `${defaultSetting .title}`
	}
    next()
})

在 vue.config.js 中设置和 public/index.html

const defatulConfig = require("./src/setting")
// 设置 项目名称
const name = defatulConfig.title
module.exports = {
	// webpack 简单配置 
    configureWebpack: {
        name: name,
        resolve: {
            alias: {
                "@": resolve("src")
            }
        },
    },
}

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
    <title><%= webpackConfig.name %></title>
    <script src="https://webapi.amap.com/maps?v=1.4.8&key=466cfc09695269cb432af38420bfebe0"></script>
    <script src="//webapi.amap.com/ui/1.0/main.js"></script>
  </head>
  <body>
    <noscript>
      <strong>We're sorry but vue_project doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
    </noscript>
    <div id="app"></div>
    <!-- built files will be auto injected -->
  </body>
</html>