Vue2和3的vue-router：生命周期、懒加载

Vue2 + vue-router

在 Vue 2 中使用 vue-router 可以方便地管理单页面应用（SPA）中的路由。理解 vue-router 的生命周期和懒加载机制对于构建高效的 Vue 应用至关重要。以下是一些关键点和示例代码来帮助你理解这些概念。

Vue Router 的生命周期
vue-router 提供了多个与路由相关的生命周期钩子，这些钩子可以在不同的时机被调用，以满足需求。

全局守卫
1、beforeEach：路由变化之前调用。
2、beforeResolve：在 beforeEach 之后，在路由被确认之前调用。
3、afterEach：路由变化之后调用。

路由独享守卫
1、beforeEnter：在路由配置中直接定义。

组件内的守卫
1、beforeRouteEnter：进入路由之前调用，不能访问 this。
2、beforeRouteUpdate：路由参数变化时调用。
3、beforeRouteLeave：离开当前路由时调用。

示例代码
以下是一个简单的示例，展示了如何在 Vue 2 项目中使用 vue-router 的生命周期钩子：

// router/index.js
import Vue from 'vue';
import Router from 'vue-router';
import Home from '@/components/Home.vue';
import About from '@/components/About.vue';Vue.use(Router);const router = new Router({routes: [{path: '/',name: 'Home',component: Home,beforeEnter: (to, from, next) => {console.log('Entering Home route');next();}},{path: '/about',name: 'About',component: About,beforeEnter: (to, from, next) => {console.log('Entering About route');next();}}]
});// 全局守卫
router.beforeEach((to, from, next) => {console.log('Global beforeEach guard');next();
});router.afterEach((to, from) => {console.log('Global afterEach hook');
});export default router;

组件内的守卫：

<template><div><h1>Home Page</h1><!-- 其他模板内容 --></div>
</template><script>
export default {name: 'Home',// 组件内的守卫 - 进入路由之前调用beforeRouteEnter(to, from, next) {console.log('Entering Home route...');// 注意：在这里你不能访问组件实例（this）next(vm => {// 当导航被确认时，并且组件实例被创建后，// 你可以通过 `vm` 访问组件实例console.log('Access to component instance via `vm`:', vm);});},// 组件内的守卫 - 路由参数变化时调用beforeRouteUpdate(to, from, next) {console.log('Route to Home updated...');// 在这里你可以访问组件实例（this）next();},// 组件内的守卫 - 离开当前路由时调用beforeRouteLeave(to, from, next) {console.log('Leaving Home route...');// 你可以在这里提示用户保存更改，或者执行其他逻辑const answer = window.confirm('Do you really want to leave? You have unsaved changes!');if (answer) {next();} else {next(false); // 阻止导航}},// 其他组件选项...
};
</script><style scoped>
/* 样式内容 */
</style>

在上面的示例中，beforeRouteEnter 守卫在路由进入组件之前被调用。由于此时组件实例尚未被创建，因此你不能访问 this。但是，next 函数可以接收一个回调函数，该回调函数将在组件实例被创建后被调用，并且可以通过该回调函数的参数访问组件实例。

beforeRouteUpdate 守卫在路由参数变化时被调用，此时组件实例已经存在，因此你可以访问 this。

beforeRouteLeave 守卫在离开当前路由时被调用，你可以在这里提示用户保存更改，或者执行其他逻辑。如果调用 next(false)，则可以阻止导航。

请注意，在 beforeRouteEnter 和 beforeRouteUpdate 守卫中，next 函数必须被调用，否则导航将被挂起。而在 beforeRouteLeave 守卫中，如果不调用 next，则导航也会被挂起，但通常你会根据用户的操作来调用 next(true) 或 next(false)。

懒加载实现

// router/index.js
import Vue from 'vue';
import Router from 'vue-router';Vue.use(Router);const router = new Router({routes: [{path: '/',name: 'Home',// 使用动态 import() 实现懒加载component: () => import(/* webpackChunkName: "home" */ '@/components/Home.vue'),beforeEnter: (to, from, next) => {console.log('Entering Home route');next();}},{path: '/about',name: 'About',component: () => import(/* webpackChunkName: "about" */ '@/components/About.vue'),beforeEnter: (to, from, next) => {console.log('Entering About route');next();}}]
});// 全局守卫
router.beforeEach((to, from, next) => {console.log('Global beforeEach guard');next();
});router.afterEach((to, from) => {console.log('Global afterEach hook');
});export default router;

在上述代码中，component 属性被替换为返回一个 Promise 的函数，该 Promise 解析为组件。webpackChunkName 是一个特殊的注释，用于在 Webpack 中为这些动态加载的模块命名，从而生成更具可读性的文件名。

Vue3 + vue-router

在 Vue 3 中，vue-router 的生命周期与 Vue 2 类似，但有一些细微的差别和新增的功能。同时，懒加载（也称为代码拆分）是优化 Vue 应用性能的一种重要手段，特别是在处理大型单页应用（SPA）时。

Vue Router 的生命周期
在 Vue Router 中，有几个关键的生命周期钩子（也称为导航守卫），它们允许你在路由变化的不同阶段执行代码。这些钩子包括：

全局守卫：
1、beforeEach：在每次路由改变之前调用。
2、beforeResolve：在路由解析之前调用，但在全局组件守卫和异步组件被解析之后。
3、afterEach：在每次路由改变之后调用（不接收 next 函数）。

全局守卫在整个应用中只定义一次，通常用于权限验证、日志记录等。

// router/index.js
import { createRouter, createWebHistory } from 'vue-router';
import Home from '../views/Home.vue';
import About from '../views/About.vue';const routes = [{path: '/',name: 'Home',component: Home},{path: '/about',name: 'About',component: About}
];const router = createRouter({history: createWebHistory(process.env.BASE_URL),routes
});// 全局前置守卫
router.beforeEach((to, from, next) => {console.log('Global beforeEach guard');// 在这里可以添加权限验证等逻辑next();
});// 全局解析守卫
router.beforeResolve((to, from, next) => {console.log('Global beforeResolve guard');next();
});// 全局后置钩子
router.afterEach((to, from) => {console.log('Global afterEach hook');// 在这里可以添加日志记录等逻辑
});export default router;

路由独享守卫：
1、beforeEnter：在路由配置中直接定义，只在进入该路由时调用。

路由守卫是定义在单个路由对象上的钩子，可以用于该路由的特定逻辑。

// router/index.js
import { createRouter, createWebHistory } from 'vue-router';
import Home from '../views/Home.vue';
import About from '../views/About.vue';const routes = [{path: '/',name: 'Home',component: Home,beforeEnter: (to, from, next) => {console.log('Before enter Home');next();}},{path: '/about',name: 'About',component: About,beforeEnter: (to, from, next) => {console.log('Before enter About');// 可以添加逻辑，比如检查用户是否登录next();}}
];const router = createRouter({history: createWebHistory(process.env.BASE_URL),routes
});export default router;

组件内守卫：
1、beforeRouteEnter：在进入路由组件之前调用（无法访问组件实例 this）。
2、beforeRouteUpdate：在路由参数变化时调用（可以访问组件实例 this）。
3、beforeRouteLeave：在离开路由组件之前调用（可以访问组件实例 this）。

组件内的守卫是定义在 Vue 组件内部的钩子，用于处理该组件的路由变化。

<!-- Home.vue -->
<template><div>Home Page</div>
</template><script>
export default {name: 'Home',beforeRouteEnter(to, from, next) {console.log('Home beforeRouteEnter');next();},beforeRouteUpdate(to, from, next) {console.log('Home beforeRouteUpdate');// 仅在路由参数变化时触发next();},beforeRouteLeave(to, from, next) {console.log('Home beforeRouteLeave');// 可以添加确认离开的逻辑next();}
};
</script>

在 Vue 3 的 script setup 语法糖中
import { onBeforeRouteLeave, onBeforeRouteUpdate } from ‘vue-router’;
可以直接引用，也可以通过Vue Router 提供的 useRoute 和 useRouter 的组合式 API 和 onMounted、onBeforeUnmount 等 Vue 的生命周期钩子来实现类似的功能。

懒加载实现

// router/index.js
import { createRouter, createWebHistory } from 'vue-router';const routes = [{path: '/',name: 'Home',// 使用动态导入语法懒加载 Home 组件component: () => import('../views/Home.vue'),},{path: '/about',name: 'About',// 使用动态导入语法懒加载 About 组件component: () => import('../views/About.vue'),},// 其他路由配置...
];const router = createRouter({history: createWebHistory(process.env.BASE_URL),routes,
});export default router;

Vue3 和新的 router 版本新加了

1、滚动行为管理：
你可以通过scrollBehavior配置选项来自定义滚动行为。例如，你可以保持之前的滚动位置，或者在路由跳转时滚动到页面顶部。
scrollBehavior方法接收一个到目标路由和当前路由的对象参数，并返回一个包含滚动位置信息的对象。
例如：

const router = createRouter({history: createWebHistory(),routes,scrollBehavior(to, from, savedPosition) {if (savedPosition) {return savedPosition} else {return { x: 0, y: 0 } // 滚动到页面顶部}}
})

2、组合式API的集成：
Vue 3引入了组合式API，这允许你以更灵活和可复用的方式组织组件逻辑。vue-router 4也相应地提供了与组合式API集成的功能。
你可以使用useRoute钩子来访问当前路由的状态（如当前路由的路径、参数、查询等），以及使用useRouter钩子来访问路由实例（如进行编程式导航）。
例如：

import { useRoute, useRouter } from 'vue-router'export default {setup() {const route = useRoute()const router = useRouter()// 访问当前路由的路径const currentPath = route.path// 进行编程式导航const navigateTo = (path) => {router.push(path)}return {currentPath,navigateTo}}
}

3、路由懒加载：
虽然懒加载在 Vue 2 中就已经存在，但 Vue 3 和 vue-router 4 提供了更简洁和易用的语法来实现路由懒加载。你可以使用动态导入（import()）语法来按需加载路由组件。

**Vue2和3 不同点
在Vue 2中，通常使用new VueRouter()来创建路由实例。
在Vue 3中，你需要使用createRouter函数来创建路由实例，并传入一个包含history和routes配置对象的参数。例如：