入门Vue——感受Vue Router实现单页应用在单页应用（SPA）技术出现之前，传统的前端开发实现页面跳转主要依赖于

在单页应用（SPA）技术出现之前，传统的前端开发实现页面跳转主要依赖于两种方式：完全页面重定向和锚链接跳转。

完全页面重定向：

最常见的方法是使用<a>标签的href属性指向一个新的URL，当用户点击该链接时，浏览器会发出新的HTTP请求，加载并展示新的页面内容。这是一种全页面的跳转，意味着浏览器会加载整个新页面，包括HTML、CSS、JavaScript以及任何资源文件。
另一种方法是使用JavaScript的window.location对象，这同样会导致页面的完全重定向。例如：

<button id="redirectButton">点击跳转</button>
    <script>
        // JavaScript 示例
        document.getElementById('redirectButton').addEventListener('click', function () {
            window.location.href = "http://www.baidu.com";
        });
    </script>

锚链接跳转：

锚链接主要用于页面内部的跳转，即跳转到当前页面内的某一特定部分。通过在<a>标签的href属性中添加#符号后跟目标元素的ID，可以实现这一点。例如，<a href="#section1">跳转至部分1</a>，点击后会滚动到ID为section1的元素。
当然，锚链接也可以跨页面使用，即href属性可以指向另一个页面加上片段标识符，如<a href="http://www.example.com#section1">跳转至外部页面的某部分</a>，但这通常仅限于同域下的页面，且跳转时仍然会进行页面的完全重载

随着单页应用技术的引入，通过局部更新页面内容而非完全重载页面，提供了更流畅的用户体验，减少了页面加载时间，使得Web应用更加类似桌面应用。

单页应用技术（SPA）

单页应用（Single Page Application，SPA）是一种Web应用程序或网站设计模式，旨在通过动态重写当前页面来减少页面加载时间和提高用户体验。与传统的多页应用（MPA）相比，SPA不会在每次用户请求时从服务器加载新的页面，而是通过JavaScript在单个HTML页面中动态地更新内容。

核心特性

单一HTML页面：整个应用在一个HTML页面中加载，并且通过JavaScript管理页面内容和导航。
客户端渲染：通过JavaScript框架（如React、Angular、Vue等）在客户端进行内容渲染，而不是从服务器获取完整的HTML页面。
动态内容加载：仅在需要时通过Ajax或Fetch API向服务器请求数据，并更新页面内容，而不刷新整个页面。
路由管理：使用前端路由（如React Router、Vue Router）管理不同的视图和URL，使应用看起来像有多个页面，但实际上只是在一个页面中动态切换内容。

单页应用的实现

单页应用通常使用现代JavaScript框架或库来实现，如：

React：由Facebook开发的用于构建用户界面的JavaScript库，专注于UI组件。
Angular：由Google开发的用于构建复杂Web应用的框架，提供完整的解决方案，包括数据绑定、依赖注入等。
Vue.js：一个渐进式JavaScript框架，易于上手，适合从小项目到复杂应用的开发。

`Vue Router`

路由（Routing）在计算机网络中指的是数据在网络中传输路径的选择过程，而在软件工程特别是Web开发领域，路由是指如何将用户的请求映射到具体的处理逻辑上，即确定用户请求的URL应该由哪个程序或函数来处理的过程。在Web应用中，每一个URL都对应着一个特定的功能或页面，路由机制就是用来解析这些URL并执行相应的业务逻辑或呈现相应的页面。

前端路由是Web应用中的一种实现方式，主要用于单页应用（SPA，Single Page Application）。在传统的多页应用中，每当用户点击一个链接或执行某个操作时，整个页面都会重新加载，浏览器会向服务器发出新的HTTP请求，获取新的HTML文档并替换当前页面。但在单页应用中，页面的主要结构只加载一次，之后的用户操作通过JavaScript来动态更新页面的部分内容，而无需重新加载整个页面。

总结就是路由是任何Web应用的基础组成部分，而前端路由则是SPA中的关键实现技术，它改变了传统Web应用的交互模式，提供了更加丰富和流畅的用户体验。

接下来进入我们的正题吧，前面聊了一些有关页面加载的概念。三种单页应用的实现方法我们这篇就先讲一下Vue里的Router来实现单页应用。

`Vue Route`体验

我们先创建一个Vue项目

npm create vue@latest

然后我们安装Vue Router

npm install vue-router@4

配置根组件

先来动一动根组件App.vue

<template>
  <h1>Hello App!</h1>
  <p>
    <strong>Current route path:</strong> {{ $route.fullPath }}
  </p>
  <nav>
    <RouterLink to="/">Go to Home</RouterLink>
    <RouterLink to="/about">Go to About</RouterLink>
  </nav>
  <main>
    <RouterView />
  </main>
</template>

<script setup>

</script>

<style lang="css" scoped>

</style>

在这个 template 中使用了两个由 Vue Router 提供的组件: RouterLink 和 RouterView。

不同于常规的 <a> 标签，我们使用组件 RouterLink 来创建链接。这使得 Vue Router 能够在不重新加载页面的情况下改变 URL，处理 URL 的生成、编码和其他功能。我们将会在之后的部分深入了解 RouterLink 组件。

RouterView 组件可以使 Vue Router 知道你想要在哪里渲染当前 URL 路径对应的路由组件。它不一定要在 App.vue 中，你可以把它放在任何地方，但它需要在某处被导入，否则 Vue Router 就不会渲染任何东西。

配置路由

在src开发目录下新建一个router文件夹，然后在这个文件夹下创建一个index.js文件，我们就在这个文件下配置我们的路由了。

我们先写成这样

import { createMemoryHistory, createRouter } from 'vue-router'

import HomeView from '../views/HomeView.vue'
import AboutView from '../views/AboutView.vue'

const routes = [
  { path: '/', component: HomeView },
  { path: '/about', component: AboutView },
]

const router = createRouter({
  history: createMemoryHistory(),
  routes,
})

这里的 routes 选项定义了一组路由，把 URL 路径映射到组件。其中，由 component 参数指定的组件就是先前在 App.vue 中被 <RouterView> 渲染的组件。这些路由组件通常被称为视图，但本质上它们只是普通的 Vue 组件。

其他可以设置的路由选项我们会在之后介绍，目前我们只需要 path 和 component。

注册路由插件

来到main.js使用use()来完成

import router from './router/index'
import { createApp } from 'vue'
import App from './App.vue'

createApp(App).use(router).mount('#app')

和大多数的 Vue 插件一样，use() 需要在 mount() 之前调用。

如果你好奇这个插件做了什么，它的职责包括：

全局注册 RouterView 和 RouterLink 组件。
添加全局 $router 和 $route 属性。
启用 useRouter() 和 useRoute() 组合式函数。
触发路由器解析初始路由。

创建views文件夹

这个文件夹用来存放不同视图的组件

创建AboutView.vue和HomeView.vue这两个文件。然后就能运行我们这个项目了。

可以看到我们在没有刷新整个页面而更新了页面。

结尾

这次只是初次入门体验了一下Vue的路由，后续还会继续学习

入门Vue——感受Vue Router实现单页应用