Vue——导航守卫

一、为什么使用导航守卫

在一个SPA应用中，网页改变，他的标题也需要改变，网页标题是通过

守卫包括：全局守卫、路由独享守卫、组件内的守卫

二、如何修改

1、在index.js中写 router.beforeEach（）函数，它需要我们给他一个箭头函数，箭头函数包含有to, from, next三个参数，前两个参数可以直接从当前route中拿到，所以我们可以在index中加入如下代码

// 全局导航守卫（实现页面跳转，标题随之更改）
router.beforeEach((to, from, next) =>{
  // congfrofrom跳转到to
  document.title = to.matched[0].meta.title
  next()
  // matched是匹配了当前的信息，取其中第一个元素必然是当前组件信息
  // 注意：一定要有next，不然无法回调下一步
})

并且要给每个路由添加包含title信息的meta元数据，如下

// index.js

// 配置路由相关信息
import VueRouter from 'vue-router'
import Vue from 'vue'

// import Home from '../components/Home'
// import About from '../components/About'
// import User from '../components/User'

// 路由懒加载
const Home = () => import('../components/Home')
const HomeNews = () => import('../components/HomeNews')
const HomeMessage = () => import('../components/HomeMessage')

const About = () => import('../components/About')
const User = () => import('../components/User')
const Profile = () => import('../components/Profile')

// 1.通过Vue.use（插件），安装插件
Vue.use(VueRouter)

// 2.创建VueRouter对象
const  routes =[
  {
    // 重定向到首页，打开网页就是首页
    path: '',
    redirect: '/home'
  },
  {
    path: '/home',
    component: Home,
    meta: {
      title: '首页'
    },
    // 添加属于Home 的子组件,子组件路由path前面不需要加 '/ '
    children: [
      {
        path: '',
        redirect: 'news',
        // 元数据
        // meta: {
        //   title: '新闻'
        // }
      },
      {
        path: 'news',
        component: HomeNews,
        meta: {
          title: '新闻'
        }
      },
      {
        path: 'message',
        component: HomeMessage,
        meta: {
          title: '消息'
        }
      }
    ]
  },
  {
    path: '/about',
    component: About,
    meta: {
      title: '关于'
    }
  },
  {
    path: '/user/:abc',
    component: User,
    meta: {
      title: '用户'
    }
  },
  {
    path: '/profile',
    component: Profile,
    meta: {
      title: '档案'
    }
  }
]
const  router = new VueRouter({
  // 配置路由和组件之间的应用关系
  routes,
  // 将url改成常见的history模式，不用带'#'的哈希
  mode: 'history',
  linkActiveClass: 'active'
})

// 全局导航守卫（实现页面跳转，标题随之更改）
// 此处是前置守卫
router.beforeEach((to, from, next) =>{
  // congfrofrom跳转到to
  document.title = to.matched[0].meta.title
  next()
  // 注意：一定要有next，不然无法回调下一步
})

// 3.将router对象传入到Vue实例
export default router

需要注意的是，导航守卫中的箭头函数的next是和生命周期中的钩子函数有关，只有执行了next才能进入下一个钩子，不然就会阻断，并且next可以进行判断后跳转到其他页面，可用于登录等操作，详情见官网。