18 导航守卫

7/8/2021 vue

监听/控制路由的切换

  • 状态修改与切换
  • 跳转的鉴权

导航守卫 | Vue Router (opens new window)

# 案例1 使用导航守卫功能实现标题的修改

// VueRouter对象
const routes = [
  {
    path: '/home',
    component: Home,
    meta: {
      title: '首页'
    },
    children: [
      {
        path: 'news',
        component: HomeNews
      },
      {
        path: 'message',
        component: HomeMessage
      }
    ]
  },
  {
    path: '/profile',
    component: Profile,
    meta: {
      title: '档案'
    },
  }
]

// 前置守卫(guard)
router.beforeEach((to, from, next) => {
  // 从from跳转到to
  document.title = to.matched[0].meta.title; // 使用导航守卫功能实现标题的修改
  next()
})

# 使用 keep-alive 保留组件的缓存

keep-alive — Vue.js (opens new window)

<!-- Profile,User 不保留缓存 -->
    <keep-alive exclude="Profile,User">
      <router-view/>
    </keep-alive>

activated, deactivated 这两个生命周期函数,只有在 keep-alive 中才有效。

activated/deactivated — Vue.js (opens new window)

更新时间: Friday, July 9, 2021 20:48