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配置对象的参数。例如：