功能作用

---

切换页面滚动

---

前端路由

---

vue router的原理

---

路由模式

---

获取hash变化

---

hash模式的锚点实现

锚点跳转

在 Vue Router 的 hash 模式下，锚点跳转指的是通过改变 URL 中的哈希值，使页面跳转到指定的位置或展示指定的内容片段 。

从代码实现角度来说，使用router.push方法传递 hash 参数就是锚点跳转的一种方式。例如router.push({ path: '/about', hash: '#team' }) ，当执行这个操作时，浏览器的 URL 会变成类似/#/about#team 。Vue Router 监听 URL 中哈希值的变化（利用hashchange事件），一旦检测到哈希值更新，就会根据新的哈希值去匹配相关的业务逻辑 。

在实际的网页场景中，锚点跳转常用于单页应用中，当页面内容较长时，比如一个介绍公司业务的页面，其中有多个板块（公司简介、团队介绍、业务范围等）。通过锚点跳转，用户点击导航栏中的 “团队介绍” 按钮，就可以快速跳转到页面中关于团队介绍的内容区域，而不需要用户手动滚动页面去查找 。

锚点定位

锚点定位则更侧重于在页面跳转或哈希值改变后，让页面滚动到与哈希值对应的具体元素位置上 。

配置scrollBehavior函数就是实现锚点定位的关键步骤。当路由发生变化且目标路由包含哈希值（to.hash存在）时，scrollBehavior函数会返回一个对象，指定要滚动到的元素（通过el: to.hash，to.hash是目标哈希值对应的 DOM 元素选择器 ），以及滚动的行为（例如设置behavior: 'smooth'来实现平滑滚动，让用户体验更加流畅）。

举个例子，在一个博客文章页面，文章内容很长，有多个段落标题。给每个段落标题设置不同的 ID（如<h2 id="section1">段落一</h2> ），当用户点击目录中某个标题的链接，触发锚点跳转，同时通过scrollBehavior实现锚点定位，让页面平滑滚动到对应的段落标题位置，方便用户快速查看指定内容。

这和我第一个个人主页中a标签使用的#top是一样的效果

---

---

router与route

---

Vue Router和loacation.href

---

路由懒加载

在 Vue Router 中，路由懒加载是一种优化技术，它可以让路由组件在需要的时候才加载，而不是在应用初始化时就全部加载，从而减小初始打包体积，提高应用首次加载速度和用户体验。

采用懒加载的决定因素主要取决于应用的性能要求、组件大小、用户体验等多个方面。以下是一些常见的因素，可以帮助你判断是否适合使用懒加载：

1. 组件大小 如果某个组件或页面较大，包含大量的代码、图片或第三方库，那么将其懒加载能有效减小初始加载时的资源大小，提高页面的加载速度。懒加载会延迟加载这些大组件，只有在需要的时候才会加载，避免了初次加载时加载过多的内容。

2. 初始加载性能 懒加载可以减小应用的初始加载时间。如果你的应用有多个页面，且用户访问的页面并不固定，懒加载可以仅加载当前需要的页面组件，从而减少初次加载的包大小。这样用户在进入应用时会感觉更快，提升了应用的响应速度。

3. 用户访问频率 如果某个页面或组件的访问频率较低，懒加载非常适用。因为懒加载会推迟不常用的资源加载，只有在用户真正访问这些页面时才加载对应的代码。这样可以提高应用的性能，避免加载不必要的内容。

4. 路由懒加载的页面数量 如果应用中有多个页面，懒加载是一个很好的性能优化策略。对于不需要立即展示的页面（例如：登录页、设置页、详情页等），你可以通过懒加载方式异步加载。这会减少初始包的大小，加快页面渲染的速度。

5. 缓存与预加载 懒加载可以与浏览器缓存相结合，提高后续访问的速度。如果用户已经加载过某个组件或页面，浏览器会缓存这些资源，后续访问时直接从缓存加载，而不需要重新下载这些文件。这对于需要在多次访问中保持流畅体验的应用尤其重要。

6. 第三方库和插件 如果你的页面中使用了较为庞大的第三方库或插件，懒加载它们可以避免在应用加载时立即引入这些重的资源。通过懒加载，只在用户需要的时候加载相关库和插件，减少不必要的资源消耗。

7. SEO 和首次用户体验 对于 SEO 或首次用户体验较为敏感的项目，懒加载要谨慎使用。懒加载可能会导致内容延迟加载，影响用户的感知速度，甚至影响搜索引擎对内容的抓取。如果你希望确保首页和内容页能快速加载并被搜索引擎索引，避免懒加载首页及重要页面，尤其是涉及到关键内容时。

8. Web 性能最佳实践

• 代码分割：代码分割是懒加载的主要应用场景，通过将应用拆分成多个块，按需加载需要的模块，可以显著减少初始加载的时间和体积。
• 异步加载：懒加载使得某些功能或页面的加载变得异步化，只有在用户交互时才加载对应的资源。这样在用户首次打开页面时，应用可以快速呈现最基本的内容，而不必等待所有内容加载完成。

9. 动态路由和按需加载 对于具有动态路由（例如：动态生成的路由、深层嵌套路由）和需要按需加载的模块，懒加载非常有用。例如，如果你的应用中包含多个子页面（例如：用户资料页、订单详情页等），只有用户真正访问这些页面时再加载对应的组件，可以有效减小页面加载的资源。

实现路由懒加载主要通过动态 import () 语法，这是 ES6 中的特性，webpack 等构建工具会将其视为代码分割点。

以下是 Vue Router 中实现路由懒加载的基本方式：

// 普通导入方式（非懒加载）
import Home from '@/views/Home.vue'

// 路由懒加载方式
const About = () => import('@/views/About.vue')

const routes = [
  {
    path: '/',
    name: 'Home',
    component: Home // 非懒加载
  },
  {
    path: '/about',
    name: 'About',
    component: About // 懒加载
  }
]

更简洁的写法可以直接在路由配置中使用：

const routes = [
  {
    path: '/',
    name: 'Home',
    component: () => import('@/views/Home.vue')
  },
  {
    path: '/about',
    name: 'About',
    component: () => import('@/views/About.vue')
  }
]

---

路由跳转方式

在 Vue Router 中，this.$router 和通过 useRouter() 钩子函数创建的路由器实例本质上都是指向 Vue Router 的实例对象，不过它们在使用场景和使用方式上存在一些区别：

• 指向同一实例：在 Vue 项目中，无论使用 this.$router 还是 useRouter() 获取的实例，它们都代表当前 Vue Router 的运行实例，操作它们都能对路由进行导航控制、获取路由相关信息（如当前路由路径、参数等 ）。比如通过它们调用 push 方法都可以实现路由跳转，调用 replace 方法可以替换当前路由。

• this.$router：主要用于在 Vue 组件的选项式 API 中。因为在选项式 API 里，有 this 指向当前组件实例的概念，通过 this 可以访问到 Vue 实例上挂载的属性和方法，$router 就是 Vue 实例挂载的一个属性，指向 Vue Router 实例。例如在 methods 选项、mounted 生命周期钩子等内部使用：

<template>
  <button @click="goToHome">跳转到首页</button>
</template>

<script>
export default {
  methods: {
    goToHome() {
      this.$router.push('/home');
    }
  }
};
</script>

• useRouter()：是在 Vue 3 的组合式 API 中使用的。组合式 API 没有了 this 的复杂指向问题，通过调用 useRouter() 钩子函数直接获取到 Vue Router 实例。一般在 <script setup> 单文件组件或者普通的组合式 API 函数中使用，例如：

<template>
  <button @click="goToHome">跳转到首页</button>
</template>

<script setup>
import { useRouter } from 'vue-router';
const router = useRouter();
const goToHome = () => {
  router.push('/home');
};
</script>

• this.$router：受限于 Vue 组件实例的上下文，只能在 Vue 组件内部使用。如果在普通的 JavaScript 文件（非 Vue 组件）中，没有 this 指向 Vue 组件实例的环境，就无法使用 this.$router 。

• useRouter()：虽然通常在 Vue 组件的组合式 API 中使用，但只要是在 Vue 的 setup 函数执行的上下文环境中，都可以使用，相对更灵活。不过，在 setup 函数之外的普通 JavaScript 模块中直接调用 useRouter() 会报错，因为它依赖于 Vue 的响应式上下文和组件的生命周期机制。

• this.$router：是通过 Vue 的依赖注入机制，在创建 Vue 应用时，Vue Router 插件将 $router 属性挂载到了每个 Vue 组件实例上。

• useRouter()：是基于 Vue 的 Composition API 提供的一种获取当前组件所在路由实例的便捷方式，它内部通过 Vue 的上下文来解析和返回正确的路由实例。

总的来说，二者都是操作 Vue Router 实例的方式，具体使用哪种取决于项目中使用的是**选项式 API 还是组合式 API **。

---

路由重定向

配置404