<vue 路由 7、导航守卫>

导航守卫

一、     知识点

1、什么是导航守卫?

(1)vue-router提供的导航守卫主要用来监听路由的进入和离开。

(2)vue-router提供了beforeEach和afterEach的函数, 它们会在路由即将改变前和改变后触发。

2、 为什么要用导航守卫？

我们来考虑一个需求:  页面跳转时如何改变网页的标题呢?

网页标题是通过<title>来显示的, 但是应用只有一个固定的HTML, 切换不同的页面时, 标题并不会改变。但是我们可以通过JavaScript来修改<title>的内容.window.document.title = '新的标题'。

那么在Vue项目中, 在哪里修改? 什么时候修改比较合适呢?

方法一、

每一个路由对应的组件.vue文件中，通过mounted声明周期函数, 执行对应的代码进行修改即可。

缺点：但是当页面比较多时, 这种方式不容易维护(因为需要在多个页面执行类似的代码).

方法二、

使用导航守卫就比较容易做到这点。

// 前置守卫(guard)

//参数说明

//to: 即将要进入的目标的路由对象.

//from: 当前导航即将要离开的路由对象.

//next: 调用该方法后执行

router.beforeEach((to, from, next)

// 后置钩子(hook)

router.afterEach((to, from)

补充：更多的导航守卫可以在官网查看学习

https://router.vuejs.org/zh/guide/advanced/navigation-guards.html#%E8%B7%AF%E7%94%B1%E7%8B%AC%E4%BA%AB%E7%9A%84%E5%AE%88%E5%8D%AB

二、效果

点击about

三、代码结构

注：主要是标红的几个文件

四、代码

index.js

//引入路由
import {
	createRouter,
	createWebHistory
} from 'vue-router'
import Home from '../views/Home.vue'

//定义路由
const routes = [{
		path: '/',
		name: 'Home',
		component: Home,
		meta: {
		  title: '首页'
		}
	},
	{
		path: '/about',
		name: 'About',
		component: () => import('../views/About.vue') ,
		meta: {
		  title: '关于'
		}
	}
]

//创建路由
const router = createRouter({
	//createWebHashHistory hash模式路径前面会多一个#号
	history: createWebHistory(process.env.BASE_URL),
	routes
})

// 前置守卫(guard)
//参数说明
//to: 即将要进入的目标的路由对象.
//from: 当前导航即将要离开的路由对象.
//next: 调用该方法后执行
router.beforeEach((to, from, next) => {
  // 从from跳转到to
  document.title = to.matched[0].meta.title
   console.log('++++');
  //beforeEach方法必须调用
  next()
})

// 后置钩子(hook)
router.afterEach((to, from) => {
   console.log('----');
})

//返回了路由
export default router

App.vue

<template>
	<div id="nav">
		<router-link to="/">Home</router-link> |
		<router-link to="/about">About</router-link> |
	</div>

	<router-view v-slot="{ Component }">
		<keep-alive>
			<component :is="Component" />
		</keep-alive>
	</router-view>
</template>

<script>

</script>

Home.vue

<template>
  <div class="home">
	  <p>Home Page</p>
    <img alt="Vue logo" src="../assets/logo.png">
  </div>
</template>

About.vue

<template>
  <div class="about">
    <h1>about page</h1>
  </div>
</template>