全局导航守卫

Posted 2021-07-27 So istes immer

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了全局导航守卫相关的知识，希望对你有一定的参考价值。

网页标题是通过<title>来显示的，但是一个SPA应用只有一个html，切换不同页面时，标题并不会改变

怎么修改？

修改src/router/index.js

import Vue from 'vue'
import Router from 'vue-router'

const Home = ()=>import('../components/Home')
const About = ()=>import('../components/About')
const User = ()=>import('../components/User')
const HomeNews = ()=>import('../components/HomeNews')
const HomeMessage = ()=>import('../components/HomeMessage')
const Profile = ()=>import('../components/profile')

Vue.use(Router)

const routes = [
  {
    path: '/',
    redirect: '/home'
  },
  {
    path: '/home',
    component: Home,
    children: [
      {
        path: '',
        redirect: 'news'
      },
      {
        path: 'news',
        component: HomeNews
      },
      {
        path: 'message',
        component: HomeMessage
      }
    ],
    meta: {
      title: '首页'
    }
  },
  {
    path:'/about',
    component: About,
    meta: {
      title: '关于'
    }
  },
  {
    path: '/user/:user_id',
    component: User,
    meta: {
      title: '用户'
    }
  },
  {
    path: '/profile',
    component: Profile,
    meta: {
      title: '档案'
    }
  }
]

const router = new Router({
  routes,
  mode: 'history',
  linkActiveClass:'active'
})

router.beforeEach((to, from, next) => {
  document.title = to.matched[0].meta.title
  next()
})

export default router

效果