Vue 教程(四十五)Vue 导航守卫

Vue 教程(四十五)Vue 导航守卫

什么是导航守卫

“导航”表示路由正在发生变化

导航守卫表示当导航开始变化到导航变化结束的那段时间里，根据导航的变化做出一些响应。比如要跳转到一个页面时，看他是不是登录了，没登录的话，得让他先登录。主要是通过跳转到某处或者取消跳转来守卫导航。

Vue Router 提供的导航

Vue Router 提供的导航守卫主要用来监听监听路由的进入和离开的。

Vue Router 提供了 beforeEach 和 afterEach 的钩子函数，它们会在路由即将改变前和改变后触发。

• 修改标题需求

  在一个 SPA 应用中，点击不同按钮、切换页面时，修改跳转页面对应的标题，可以通过 JavaScript 来修改 <title> 的内容。

  如果页面比较多时，在每一个路由对应的组件 .vue 文件中，通过 created 声明周期函数， 执行对应的代码进行修改，这种方式维护成本太高，下面通过导航守卫的方式实现

添加元属性

// 2. 定义路由
const routes = [
  {
   
    // 配置默认路径
    path: '/',
    redirect: '/home',
  },
  {
   
    meta: {
    title: '首页' },
    path: '/home',
    component: () => import('../components/Home'),
    children: [
      {
   
        meta: {
    title: '新闻' },
        path: 'news',
        component: () => import('../components/News'),
      },
    ],
  },
  {
   
    meta: {
    title: '关于' },
    path: '/about',
    component: () => import('../components/About'),
  },
  {