vue动态设置页面title
一、项目场景：
新建一个vue项目，默认的页面title是这样的：
那如何做成这种如CSDN一样动态的呢？
分析：这个title分为两部分：“写文章”+“CSDN博客”
在csdn任意一个页面，后面都会有“CSDN博客”字样，所以，“CSDN博客”是系统title，“写文章”是单页面title，两个title通过“-”连接，形成整个页面的title
二、实现方法
1.获取页面title公共方法创建
以下代码可以单独写一个get-page-title.js的文件，放到工具类utils文件夹下，用来获取页面的title
const title = "我是系统名称";//可以在这里直接定义，也可以在一个地方统一设置再在这里引入export default function getPageTitle(pageTitle) {if (pageTitle) {return `${pageTitle} - ${title}`;}return `${title}`;
}2.路由配置：配置单页面title
3.引入公共方法，并在路由守卫中使用：
import getPageTitle from "@/utils/get-page-title";
router.beforeEach(async (to, from, next) => {document.title = getPageTitle(to.meta.title);next();
});
三、实现结果：
多说一句：前面的vue图标直接将自己需要的图标更改成ico格式，替换换public/favicon.ico即可（注意名称一致，如果想自定义名称那就再改index.html中引入使用的地方）
总结：写博客是为了做笔记！
vue动态设置页面title相关推荐
- vue 动态设置页面title
在这里我们介绍3种方法 1.通过自定义指令去修改(单个修改比较好) 1.在main.js 页面里添加自定义指令// Vue.directive('title', {//单个修改标题inserted: ...
- Vue动态设置路由title
{ path: '/videoCover', component: () => import ('./view/videoCover.vue'), meta: {title: ''}, }, 需 ...
- Vue中动态设置页面title
前言 更多内容,请访问我的 个人博客. 安装依赖 npm install vue-wechat-title --save 复制代码 在mian.js中引入 //设置title import VueWe ...
- 微信小程序动态更改标题栏_微信小程序实现动态设置页面标题的方法【附源码下载】...
本文实例讲述了微信小程序实现动态设置页面标题的方法.分享给大家供大家参考,具体如下: 1.效果展示 2.关键代码 ① WXML文件 标题1 标题2 标题3 还原 ② JS文件 Page({ // 设置 ...
- [微信小程序] 动态设置页面标题、导航条 navigationBarTitleText
前言 navigationBarTitleText用于小程序设置当前页面标题,可以给每个页面设置独立的标题,但是这样不能满足一些特殊业务场景:比如说商城,商品详情页面的标题,会根据获取到的数据动态修改 ...
- [vue] 怎么解决vue动态设置img的src不生效的问题
[vue] 怎么解决vue动态设置img的src不生效的问题 不是应该 require('@/assets/images/xxx.png') 这样吗??你这样多浪费资源啊 @chenqim 个人简介 ...
- Vue动态设置Style属性
Vue动态设置Style属性_fuzhongbin的博客-CSDN博客_vue 动态style :style="{ color:domain.groups == 1? '#ccc': dom ...
- 223_动态设置页面指示器indicators
223_动态设置页面指示器indicators 有时候我们的ViewPager或者什么页面是动态的 是从服务器返回的 那么我们就不知道一共有多少个指示器,也就是多少个原点 for (int i = 0 ...
- vue 动态设置组件高度_高度动态的Vue明星评分组件
vue 动态设置组件高度 虚拟动态星级 (vue-dynamic-star-rating) A Highly Customizable, easy-to-use elegant stars ratin ...
最新文章
- Install Package and Software
- java io 文件复制_实例讲述Java IO文件复制
- 眼球网站经济学之我见——在网站上建立现代的经济体系
- 如何查看单元测试的结果 以及异常处理
- RecyclerView onClick
- 关于搭建测试环境（详细）
- fgo日服服务器维护,FGO国服和日服哪个福利更好 圣晶石维护补偿对比
- 阿尔泰USB5630数据采集卡
- Position Based Dynamics【译】
- 华为AI Gallery社区《基于机器学习的欧洲杯赛事预测》技术分析系列——（一）基本原理
- 白箱测试、黑箱测试、回归测试？
- python实现DEAMON守护进程
- 校验组织机构代码 合法性
- Erigon 最新执行客户端安装教程
- springboot停车场车辆定位管理可视化分析系统 毕业设计-附源码101702
- DVWA系列(二)----DVWA环境搭建
- 安卓基于BLE的蓝牙开发入门
- 修复vscode 终端字体间隔过大的问题
- MTK启动流程-MT6761
- php重定向高数,基于PHP的高等数学在线测试软件