为什么使用导航守卫

■我们来考虑一个需求: 在一个SPA应用中, 如何改变网页的标题呢?

  • 网页标题是通过<title>来显示的,但是SPA只有一一个固定的HTML,切换不同的页面时,标题并不会改变.
  • 但是我们可以通过JavaScript来修改<title>的内容 window.document.title = '新的标题'
  • 那么在Vue项目中,在哪里修改?什么时候修改比较合适呢?

■普通的修改方式:

  • 我们比较容易想到的修改标题的位置是每-个路由对应的组件.vue文件中
  • 通过mounted声明周期函数,执行对应的代码进行修改即可
  • 但是当页面比较多时,这种方式不容易维护(因为需要在多个页面执行类似的代码)

■有没有更好的办法呢?使用导航守卫即可

■什么是导航守卫?

  • vue-router提供的导航守卫主要用来监听监听路由的进入和离开的.
  • vue-router提供了beforeEach和afterEach的钩子函数,它们会在路由即将改变前和改变后触发.

导航守卫的使用

■我们可以通过beforeEach来完成标题的修改

beforeEach

要求我们传入一个回调函数。函数中由三个参数，to、from、next

  • to：即将要进入的目标路由的对象
  • from：当前导航要离开的路由对象
  • next：调用该方法后才能进入下一个钩子

补充：afterEach只需要to和from两个参数，不需要调用next

首先，我们可以在钩子当中使用meta定义一些标题

请输入图片描述

其次，利用导航守卫修改标题

请输入图片描述

更多使用方法请去官网学习 --> https://router.vuejs.org/zh/guide/advanced/navigation-guards.html

其他vue-router文章

vue-router的安装和配置方式
将router修改为HTML5的history模式 & router-link的其他属性
vue的动态路由
vue的路由懒加载
vue路由的嵌套
vue-router参数传递
vue-router导航守卫
vue-router的keep-alive