【vue】 vue如何根据不同路由地址更改页面的标题

效果

参考文章：
VUE 中设置浏览器的 TITLE 跟随路由的名称变化
vue如何根据不同路由地址更改页面的标题
vue设置路由title，实现在vue路由发生变化的时候，相应的页面title随之变化
vue 动态设置网页标题

如何实现这样的效果

permission.js

新建permission.js 与main.js同级

import router from "@/router";
router.beforeEach((to, from, next) => {
    document.title = to.meta.title;
  next();
});

meta字段是配置路由信息时加入的字段

meta: { title: '首页' }

main.js

在main.js中导入permission.js

下班~