Vue Router 是官方的路由管理器。它与 Vue.js 核心深度集成，让构建单页面应用程序 (SPA) 变得轻而易举。而SPA 是一种网页应用，它可以在不重新加载整个页面的情况下动态地改变视图。
今天，通过基础的学习，我们来做个简单高效单页面应用的导航系统。
Vue 语法基础回顾
在深入探讨 Vue Router 之前，我们先快速回顾一下 Vue 的核心概念：
组件：Vue 应用程序由一系列独立的、可复用的组件构成。
响应式：Vue 提供了声明式的数据绑定和组件系统，使得状态管理和UI更新变得简单。
生命周期钩子：允许我们在组件的不同生命周期阶段执行代码。
指令：如 v-bind 绑定属性，v-model 创建双向数据绑定，v-for 进行列表渲染。
属性：包括 ref（引用），props（父组件传递给子组件的数据），以及 computed（计算属性）。
了解了这些我们进入今天的 Vue Router 基础
Vue Router 基础
Vue Router 负责管理应用中的导航。通过使用 <router-link> 组件，我们可以创建链接，这些链接不会触发传统的页面重载，而是只更新页面的一部分。
准备工作：
执行npm init vite ，选择好vue 和JS,并下载好依赖。
使用vue-router当然要安装好router依赖： npm i vue-router
记住在main.js文件上 .use(router)：使用 Vue Router 插件，router 是 Vue Router 的实例。 如果你忘记了这一步，那后面你写的router-link标签，其实就是div标签了
import { createApp } from 'vue'
import './style.css'
import App from './App.vue'
import router from './router'
createApp(App).use(router).mount('#app')
总体框架：
重载与更新的优劣：
我将用一个简单的例子，使用a标签和vue-router，看看它们的区别：
路由配置 (router/index.js)
代码
import Home from '../views/Home.vue'
// 路由配置
import {
createRouter, // 创建路由实例
createWebHashHistory // 路由模式
} from 'vue-router' // 插件
const routes =[
{
path:'/', // 路径
component:Home // 页面组件
}
]
const router=createRouter({
// 创建路由
history:createWebHashHistory(),
// 路由模式
routes // 路由配置数组
})
export default router
代码解释：
routes：是一个包含路由定义的对象数组。每个对象至少需要两个属性：path（路由路径）和 component（与该路径关联的组件），含义为到你到达path 时会为你渲染component中对应组件，
其中Home,就是相对应的组件。
createRouter：用于创建一个新的 Vue Router 实例。
history 中有 createWebHashHistory：指定使用的路由模式为哈希模式（#） createWebHistory：生成“正常”的URL，没有 # 符号，例如http://example.com/user/123，初学时，两个填写一个就好了。
<script setup>
</script>
<template>
<div>
<a href="/home">点我刷新页面</a>
<hr>
<router-link to="/">点我直接跳转</router-link>
</div>
</template>
<style scoped>
</style>
代码解释：
<a> 标签： 这是一个标准的 HTML 锚点元素。点击它会导致浏览器尝试加载 /home 页面，这将导致整个页面重新加载。
<router-link> 组件：这是 Vue Router 提供的一个自定义组件，用来替代 <a> 标签进行页面内导航。它的 to 属性指定了目标路径。点击此链接时，Vue Router 会拦截导航行为，更新 URL 并渲染相应的组件，而不会重新加载整个页面。这是实现无刷新导航的关键所在。
结论： router-link 组件包含a的功能
主要优势：
单页面应用（SPA）与传统基于 <a> 标签的多页面应用（MPA）相比，在用户体验和开发效率上有着显著的不同。以下是 SPA 相对于传统 <a> 标签链接的主要优势：
无刷新导航：用户可以在不重新加载整个页面的情况下浏览不同的视图或页面。
提高性能：减少了网络请求的数量，加快了页面切换的速度。
更好的用户体验：提供了更加平滑、即时响应的体验，类似于桌面应用程序。
内容显示：
那长的帅的读者就要问了，内容怎么展示呀？通过上面的理解，我们已经直接使用vue-router能给我们带来的好处，那么下面这个例子将实现一个简单的SPA，并展示内容。
我们需要了解一下：
<router-view> 是 Vue Router 提供的一个特殊组件，它在单页面应用（SPA）中扮演着至关重要的角色。它的主要作用是作为一个占位符或容器，用来动态地渲染与当前路由匹配的组件。每当用户导航到不同的路径时，Vue Router 会根据配置的路由规则，自动将对应的组件插入到 <router-view> 所在的位置。
延续上面的代码例子：
App.vue:
添加：
<div>
<router-link to="/home">点我直接回家</router-link>
<hr>
<router-link to="/about">点我直接到达关于</router-link>
<hr>
<router-view/>
</div>
路由配置：
const routes =[
{
path:'/home', // 路径
component:Home // 页面组件
},
{
path:'/about', // 路径
component:About // 页面组件
}
]
效果：
子路由
我们About中添加一个子路由的页面显示：
还是利用上面的案例进行增加：
路由配置
const routes =[
{
path:'/home', // 路径
component:Home // 页面组件
},
{
path:'/about', // 路径
component:About ,// 页面组件
children:[
{
path:'meta',
component:Aboutson,
}
]
}
]
嵌套路由 (/about/meta) ：
在 /about 下定义了一个子路由，其路径为 meta。
这意味着当用户访问 /about/meta 时，About 组件会被渲染，同时在其内部的 <router-view> 中会渲染 Aboutson 组件。
About.vue 中
<template>
<div>
来到关于
<hr>
<button @click="goto">点击进入文章</button>
<router-view></router-view>
</div>
</template>
<script setup>
import {useRouter} from 'vue-router'
const router = useRouter() // 路由实例 总管
const goto=()=>{
// js 跳转
// Browser Object Model > DOM
// BOM API
// 破坏了什么
// window.location.href = '/'
router.push('/about/meta')
}
</script>
<style lang="scss" scoped>
</style>
按钮：包含文本“点击进入文章”，并绑定了 @click 事件，当点击时会调用 goto 方法。
<router-view> ：在这里渲染嵌套路由的子组件。在这个例子中，如果用户导航到 /about/meta，则 Aboutson 组件将在这里被渲染。
引入 useRouter：从 vue-router 中导入 useRouter 函数，并通过它获取当前应用的路由实例。
router.push('/about/meta') 是 Vue Router 提供的一个用于编程式导航的方法，它允许你在代码中动态地改变当前的路由。当你调用 router.push() 时，Vue Router 会根据提供的路径或命名路由信息更新浏览器的 URL，并相应地渲染匹配的组件。就像压入栈一样，将新的网页更新压入进去。
与window.location.href = '/about/meta'的区别：
总结：
无刷新导航：使用 <router-link> 和 <router-view> 实现页面内导航，避免了页面重载。
编程式导航：利用 router.push() 动态改变路由，保持应用状态。
子路由：通过嵌套路由定义复杂的页面结构，增强应用的功能性。
通过这些再加上一些CSS样式，我们就能做出一个简单的导航页面：