vue实现点击链接，网页标题显示自定义内容

想要实现的效果

router文件夹下的index.js的写法：

import Vue from 'vue'
import Router from 'vue-router'
// import HelloWorld from '@/components/demo1'
import home from '@/components/home'
import about from '@/components/about'
import user from '@/components/user'
import homeMessage from '@/components/HomeMessage'
import homeNews from '@/components/HomeNews'
import VueRouter from 'vue-router'
Vue.use(Router)

 const routes=[
    {
      path: '',
      redirect: '/home',
    },
    {
      path: '/home',
      name: 'home',
      meta:{
        title:'首页'
      },
      component: home,
      children:[
        {
          path: 'homeMessage',
          name: 'homeMessage',
          component: homeMessage
        },
        {
          path: 'homeNews',
          name: 'homeNews',
          component: homeNews
        }
      ],
    },
    {
      path: '/about',
      name: 'about',
      component: about,
      meta:{
        title:'更多'
      },
    },
    {
      path: '/user',
      name: 'user',
      component: user,
      meta:{
        title:'用户'
      },
    }
  ]
  const router=new VueRouter({
    routes,
    mode:'history',
    linkActiveClass:'active'
  })
//前置钩子
router.beforeEach((to,from,next)=>{
  console.log(to.meta)
  document.title=to.meta.title
  next()
  console.log('前置钩子')
});
//后置钩子
router.afterEach((to,from)=>{
  document.title=to.meta.title
console.log('后置钩子')
})
export default router

其中需要：

• 在跳转路径的配置里添加meta属性
• 选择前置钩子或者后置钩子，将to里面的meta里的title字段赋值给document的title字段

ps：前置钩子需要表示是在跳转前发生，需要自己调用一下next()函数
后置钩子表示是在跳转后，直接获取to.meta.title赋值即可
调用顺序展示：