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中引入使用的地方）

总结：写博客是为了做笔记！