【面试题解】vue-router有几种钩子函数？具体是什么及执行流程是怎样的？

2022-12-10 11:37:35 浏览数 (1)

本文演示代码基于 vue-router 4.x

前言

vue-router 有几种钩子函数？具体是什么及执行流程是怎样的？

先上思维导图。

分析

vue-router 的 钩子函数 ，其实说的就是 导航守卫 。

引用官网的话

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

vue-router 提供的导航守卫主要用来通过 跳转 或 取消 的方式 守卫导航 。有多种机会植入路由导航过程中：全局的, 单个路由独享的, 或者组件级的。

也就是：全局守卫、路由守卫、组件守卫。

代码演示环境搭建

先简单搭建一下环境

index.js

代码语言：javascript复制
/*
 * @Description:一尾流莺
 * @Date: 2021-03-21 16:17:56
 * @LastEditTime: 2021-07-18 15:14:42
 * @FilePath: vite-project-jssrcrouterindex.js
 */

import { createRouter, createWebHashHistory } from 'vue-router';

const router = createRouter({
  history: createWebHashHistory(),
  routes: [
    {
      path: '/a',
      component: () => import('../components/A.vue'),
    },
    {
      path: '/b',
      component: () => import('../components/B.vue'),
    },
    {
      path: '/c',
      component: () => import('../components/C.vue'),
    },
  ],
});
export default router;

main.js

代码语言：javascript复制
// index.js
import router from "./router"; 
createApp(App).use(router).mount("#app");

页面A

代码语言：javascript复制
<template>
  <div>
    <h1>我是页面A啊</h1>
    <comp></comp>
  </div>
</template>

页面B

代码语言：javascript复制
<template>
  <div>
    <h1>我是页面B啊</h1>
    <comp></comp>
  </div>
</template>

页面C

代码语言：javascript复制
<template>
  <div>
    <h1>我是页面C啊</h1>
    <comp></comp>
  </div>
</template>

通用组件

代码语言：javascript复制
<template>
  <div>我是公用组件啊</div>
</template>

当前页面是这样的，有点丑，凑活看吧，咱也不是来学习 css 的

全局守卫

顾名思义，是要定义在全局的，也就是我们 index.js 中的 router 对象。

beforeEach

全局前置守卫，在路由跳转前触发，它在 每次导航 时都会触发。

通过 router.beforeEach 注册一个全局前置守卫。

代码语言：javascript复制
router.beforeEach((to, from, next) => {
  console.log('


	


vue.js 编程算法 javascript 




	






	

 0 人点赞