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'),
},
{