路由具体知识可以跳转 # 一篇文章教会你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()
如何改变网页标题
使用document.title='新标题'来修改标题
document.title = '新标题'
前置路由守卫
to:  要去哪个页面
from:从哪里来
next:它是一个函数。
如果直接放行 next()
如果要跳到其它页 next(其它页)
router.beforeEach((to, from, next) => {
  next()
       
粉丝
 
  
   
    
友情链接：