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>