Vue修改网页标签栏标题以及标签栏图标

//1.首先在src/router/index.js目录下给需要的路由添加title
const routes = [
  {
    path: '/',
    component: () => import('页面路径'),
    meta: {
      title: '我是主页',
    }
  },
]

//2.通过路由前置守卫处理 ---在跳转前就触发
router.beforeEach((to, from, next) => {
  // 参数是固定的3个:
  // to: 要跳转到的位置
  // from: 当前位置
  // next: 放行, 允许跳转
  document.title = to.meta.title
  next() //通过next()还可以解决相同路径不允许重复跳转的问题
})

修改图标很简单

标签栏的图标路径是 public/favicon.ico, 用自己的图片替换这个文件, 标签栏的图标就变化了