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>

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

vue中修改浏览器标签栏title和图标
vue中修改浏览器标签栏title和图标一.修改文字在项目中的index.html文件title标签中直接写二.修改标签栏图片 1.在项目中的static文件中放入一张图片 2.在index.h ...
Vue中设置浏览器标签栏图标以及title
1.设置浏览器标签栏图标使用脚手架创建的项目,已经将标签栏图标设置好了,默认的是vue的图标.如果需要修改,只需要将public文件夹下面的favicon.icon文件替换为我们自己的图标即可 2. ...
vue项目设置浏览器标题title及图标
一.固定设置标题方案方法一:在vue.config.js文件,添加如下代码: chainWebpack: config => {config.plugin('html').tap(args = ...
vue项目设置浏览器标题title
VUE2: 一.固定设置标题方案方法一,在vue.config.js文件添加如下代码: chainWebpack: config => {config.plugin('html').tap( ...
在单页应用Vue中设置标题（title）
安装 npm install vue-wechat-title --save main.js引入 Vue.use(require('vue-wechat-title')) 路由定义 {path: '/ ...
在vue中修改浏览器图标和名字
在vue中修改浏览器图标和名字 vue中,网页图标默认使用的是vue自带的一个icon的图标,也是vue的logo. 下面整理了几种改变标题和图标的方法 1.修改图标样式 01.使用图片这个方法是可 ...
只需2步，教你在Vue中设置登录验证拦截
摘要:两步教你在Vue中设置登录验证拦截! 本文分享自华为云社区<两步教你在Vue中设置登录验证拦截!>,作者: 灰小猿 . 今天在做vue和springboot交互的一个项目的时候,想要 ...
在vue中设置背景图片
在vue中设置背景图片在App.vue中将样式中默认的margin-top 改为0,使得页面顶部不留白 #app {font-family: 'Avenir', Helvetica, Arial, ...
vue中控制浏览器滚动
vue中控制浏览器滚动最近的业务中需要用到控制浏览器滚动到对应位置的问题,pc端用到的是vue框架,业务是点击题目题号,定位到相对应的题目(相信业务中会经常遇到哈),首先想到的肯定就是js老大哥了, ...

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

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

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

最新文章

热门文章