持续创作，加速成长！这是我参与「掘金日新计划 · 10 月更文挑战」的第17天，点击查看活动详情

1.网页标题是什么

以百度为例,打开百度首页

可以看到百度浏览器头部显示的选项卡,一个图片加上文字百度一下,你就知道

这里的图标是icon图标,是写在html部分的头部

那标题写在哪里呢?

也写在了html的head部分,在一个名为title的便签里

我们改一下百度的title看看网页的头部是否会变化

我把百度一下,改成了度娘一下,果然网页头部也发生了变化

2.为什么要动态设置网页的标题

目的是为了在使用不同页面时显示不同的网页标题

那有人就要问了?

本来不就是这样吗?难道打开一个新的网页不显示现在网页的标题,还显示之前的标题吗?

如果点击生成一个新的网页,或者当前网页跳转到一个新的网页,
那么在新的进入新的网页时,浏览器会解析html中的title标签生成新的网页标题

但是还存在着一种情况:路由跳转

路由跳转,是同一个网页,但是点击不同的路由按钮,路由出口会显示不同的界面

路由使用典型例子:网易云音乐

路由具体知识可以跳转# 一篇文章教会你Vue路由(vue-router)的原理和如何使用

3.怎么才能动态设置网页标题(根据路由页面不同设置不同标题)

(1)设置路由规则时设置title

我们可以在路由规则中设置一个meta对象,在里面存储不同路由界面的标题和图标,

在之后可以从中取用其中的title和icon

export const routes = [
  {
    path: '/hobby',
    component: () => import('@/views/login/index'),
    // meta对象存储标题和icon图标
    meta: { title: '我的喜欢', icon: 'hobby' }
  },
  {
    path: '/home',
    component: () => import('@/views/login/index'),
    // meta对象存储标题和icon图标
    meta: { title: '主页', icon: 'home' }
  }
]

(2)前置路由守卫中改变网页title

我们要修改的是不同路由页面时的网页标题

最好在跳转到新的路由页面前已经准备就绪,

所以我们在前置路由守卫中修改网页标题

// 改变标题
router.beforeEach((to, from, next) => {
  document.title = to.meta.title
  next()
})

4.总结

如何改变网页标题

使用document.title='新标题'来修改标题

document.title = '新标题'

前置路由守卫

to: 要去哪个页面
from:从哪里来
next:它是一个函数。
如果直接放行 next()
如果要跳到其它页 next(其它页)

router.beforeEach((to, from, next) => {
  next()
})

如何动态设置网页标题