想要学好vue，vue的路由功能是必不可少的，也是做单页应用开发，必不可少的一环，那么接下来我们就来看看vue的路由是怎么一回事吧。
什么是路由
路由可分为：
客户端路由 (Client-side Routing)
客户端路由，也称为单页应用路由（SPA - Single Page Application routing），是在浏览器中管理应用程序内部不同视图或页面的过程。当用户在应用内部导航时，客户端路由会更新URL，并且只请求和渲染那些发生变化的部分，而不是重新加载整个页面。
服务端路由 (Server-side Routing)
服务端路由则是在服务器上处理URL请求的过程。当用户访问一个URL时，服务器根据URL解析出对应的资源或业务逻辑，并返回相应的HTML页面或API响应,每次页面导航都会导致完整的页面加载。。
在Vue.js中，路由指的是一个框架内用于处理URL和视图之间的映射关系的系统，通常我们使用vue-router库来实现这一功能。vue-router是Vue.js官方提供的路由管理器，它与Vue的核心深度集成，使得构建单页面应用（SPA）变得更加容易。
路由的使用
如果你想为你的vue项目加入路由功能：
使用 JavaScript 包管理器安装Vue Router， 输入指令：
npm install vue-router@4
或者你需要创建新项目，可以使用npm create vue@latest,他会创建一个基于vite的vue项目，它会提供Vue Router的选项，只需要在创建的时候添加就好了。
添加Vue Router选项的方式引入路由咱就不说了，让我们自己来手动引入看看，该怎么使用vue路由吧。
首先在项目内下载vue-router库,指令为：
npm install vue-router@4在src目录下创建
router文件，添加一个index.js的路由配置文件，内容如下：
可以配置很多个路由，其他的路由配置和这个路由的格式是一样，我们只需要按照这样配就好，它们也被称为一级路由。
也可以像下面这样先引入，再赋值给component属性。其他可以设置的路由选项我们会在之后介绍，目前我们只需要 path 和 component。
import { createMemoryHistory, createRouter } from 'vue-router'
import HomeView from './HomeView.vue'
import AboutView from './AboutView.vue'
const routes = [ {
path: '/',
component: HomeView
},
{
path: '/about',
component: AboutView
},
]
const router = createRouter({ // 创建路由器实例是通过调用 `createRouter()` 函数创建的:
history: createMemoryHistory(),
routes,
})
配置history时，通常，我们会使用
createWebHistory()或createWebHashHistory()：createWebHashHistory()不需要服务器端的特殊配置，但 URL 包含#，可能不那么美观。createWebHistory()提供更干净的 URL 结构，但需要服务器端的配合。createWebHashHistory是Vue Router 4中用于创建一个基于浏览器哈希 (#) 的历史记录对象的方法。它利用浏览器的URL哈希部分来保存路由状态，而不触发完整的页面重载。此方法特别适用于兼容旧浏览器的单页面应用（SPA），兼容性较好。createWebHistory()是 Vue Router 库中的一个函数，用于创建一个基于 HTML5 历史 API 的路由器实例，使用createWebHistory()的一个关键点是，服务器必须正确配置，以处理所有路径都指向同一个入口文件（通常是index.html）。这是因为，当用户直接访问或刷新非根 URL 时，如果没有正确的服务器配置，可能会导致 404 错误。
总结
我们在Vue Router中定义了path: '/home'这样的路由规则时，意味着有一个特定的组件被关联到了/home这个URL路径。为了让这个组件的内容展示在页面上，你需要在浏览器的地址栏中输入http://xxxxxx/home（其中xxxxxx是你的网站域名），或者在应用内部通过<router-link :to="{ path: '/home' }">或this.$router.push('/home')等方式进行导航。
<template> <nav> <RouterLink to="/">Go to Home</RouterLink> <RouterLink to="/about">Go to About</RouterLink> </nav> <main> <RouterView /> </main> </template>
就像上面的这样可以点击
Go to About，/home路径下的特定组件将被显示在<RouterView />，而RouterView又被称为——路由入口。<router-link>是Vue Router提供的一种特殊的Vue组件，用于在单页应用中创建链接。它的工作方式类似于HTML中的<a>标签，但是它在内部使用Vue Router的导航机制，而不是传统的页面跳转，这意味着在点击链接时，页面不会完全重新加载，而是只更新与新路由关联的部分视图。<router-view>是Vue Router中一个非常关键的组件，用于在应用程序中渲染与当前活动路由相匹配的组件。它是Vue Router的主要出口点，负责展示当前路由对应的视图内容。这样就可以使用路由功能吗？其实这样是不行，我们还需要在项目单点入口文件内引入这个
router，并使用。
启动项目，你的一个简单的路由使用就完成了。
路由传参数
应用场景：
路由传递参数是一个很常见的场景，就像掘金的文章查看一样：
有一个文章id，然后通过id查找该篇文章的信息，进行展示，所有这个还是很常见的。
传参，首先需要了解编程式导航（下面是vue-router官方文档解释）
想要导航到不同的 URL，可以使用
router.push方法。这个方法会向 history 栈添加一个新的记录，所以，当用户点击浏览器后退按钮时，会回到之前的 URL。当你点击
<router-link>时，内部会调用这个方法，所以点击<router-link :to="...">相当于调用router.push(...)：所以你用路由时携带参数可以这样：
不声明 prop接收参数：
为了解除使用$route 或useRoute()会与路由耦合的限制，可以声明 prop 接收参数：
