Vuejs学习笔记(三)-20.vue-router的全局导航守卫(router.beforeEach)-前置守卫(gard),全局后置钩子(router.afterEach)(hook)

全局导航守卫：解释不清

需求：希望点击每个菜单是，网页的title显示菜单名称。

2种方式实现

方式1：每个组件通过回调生命周期函数时，来创建一个title元素

Home.vue,About.vue

<template>
  <div>
    <h2>我是首页</h2>
    <router-link to="/home/news">新闻</router-link>
    <router-link to="/home/messages">消息</router-link>
    <router-view></router-view>
  </div>
</template>

<script>
export default {
  name: "Home",
  created(){
    document.title = '首页'
  }
}
</script>

<style scoped>

</style>

然后点击每个路由跳转的页面时，页面的title会显示

 

 

但是这个方式由问题，如果有100个页面，就得改100个组件的代码.很麻烦。

 

方式2：使用router对象的全局导航守卫

步骤1：路由中定义meta属性

 

 步骤2：在router/index.js中使用全局导航守卫

 

 代码如下：

router/index.js

import Vue from 'vue'
import VueRouter from 'vue-router'

// 路由的懒加载
const Home = () => import('../components/Home')
const About = () => import('../components/About')
const User = () => import('../components/User')
const HomeMessages = ()=>import('../components/HomeMessages')
const HomeNews = ()=>import('../components/HomeNews')
const Profile = ()=>import('../components/Profile')

Vue.use(VueRouter)

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

const router = new VueRouter({
  routes,
  mode:'history'
})

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

export default router

to表示到哪个路由，from表示从哪个路由，next就是指下一个对象

同样可以实现点击页面，title显示指定值。

优点：只用在路由文件中维护代码即可。

一个术语：beforeEach又叫做前置守卫（guard）

另一个术语：afterEach又叫做后置钩子(hook)

 

 

 使用场景暂时不清楚

 

import Vue from 'vue'
import VueRouter from 'vue-router'

// 路由的懒加载
const Home = () => import('../components/Home')
const About = () => import('../components/About')
const User = () => import('../components/User')
const HomeMessages = ()=>import('../components/HomeMessages')
const HomeNews = ()=>import('../components/HomeNews')
const Profile = ()=>import('../components/Profile')

Vue.use(VueRouter)

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

const router = new VueRouter({
  routes,
  mode:'history'
})
//全局前置守卫
router.beforeEach((to,from,next)=>{
  document.title = to.matched[0].meta.title
  next()
})
//全局后置钩子
router.afterEach((to,from)=>{
  // 没有next
  console.log(to);
  console.log(from);
})

export default router

 

 还有路由独享守卫，组件守卫，详见官方网站

https://router.vuejs.org/zh/guide/advanced/navigation-guards.html#%E7%BB%84%E4%BB%B6%E5%86%85%E7%9A%84%E5%AE%88%E5%8D%AB