前端路由管理简介：
当谈到前端路由管理时，通常指的是在单页面应用程序（SPA）中管理页面间导航和URL的过程。路由管理器是一个工具，可以帮助前端开发者定义应用程序的不同视图之间的关系，同时能够响应URL的改变。
具体步骤:
在讲这个路由具体步骤之前：
先来看这一段页面跳转的代码，我们是通过根据active的值来进行跳转页面的。
不过这样做出来，我们的url其实是没有改变的，只是切换了不同的页面。
所以，就需要我们下面的路由管理：
Vue-Router
Vue-Router 其实就是帮助你根据不同的 url 来展示不同的页面（组件），不用自己写 if / else
1：安装官方路由：
贴一个Vue-Router的官方文档
安装 | Vue Router (vuejs.org)
npm install vue-router@4下载完之后可以在package.json文件中看到路由的依赖：
2：创建路由实例：
在创建路由实例之前我们需要知道：
路由配置影响整个项目，所以建议单独用 config 目录、单独的配置文件去集中定义和管理。
有些组件库可能自带了和 Vue-Router 的整合，所以尽量先看组件文档、省去自己写的时间。
所以新建一个config文件包下面再创建一个router.ts
把我们创建的路由对象导入：
import Index from "../pages/Index.vue";
import Team from "../pages/Team.vue";
import User from "../pages/User.vue";
import Search from "../pages/Search.vue";
const routes = [
{ path: '/', component: Index },
{ path: '/team', component: Team },
{ path: '/user', component: User },
{ path: '/search', component: Search },
]
export default routes;这一段可以参考官方文档的入门：
入门 | Vue Router (vuejs.org)
3：在main.ts文件中挂载router：
import { createApp } from 'vue'
import App from './App.vue'
// import {Button, NavBar} from "vant";
import {createWebHashHistory} from "vue-router";
import routes from "./config/router.ts";
import * as VueRouter from 'vue-router';
const app = createApp(App);
const router = VueRouter.createRouter({
history: createWebHashHistory(),
routes,
})
app.use(router);
app.mount('#app')
// const app = createApp(App);
// app.use(Button);
// app.use(NavBar);
// app.mount('#app')
4：在主页中设置我们的路由操作：
这里需要说一下：
<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>在这个
template中使用了两个由 Vue Router 提供的组件:RouterLink和RouterView。不同于常规的
<a>标签，我们使用组件RouterLink来创建链接。这使得 Vue Router 能够在不重新加载页面的情况下改变 URL，处理 URL 的生成、编码和其他功能。我们将会在之后的部分深入了解RouterLink组件。
RouterView组件可以使 Vue Router 知道你想要在哪里渲染当前 URL 路径对应的路由组件。它不一定要在App.vue中，你可以把它放在任何地方，但它需要在某处被导入，否则 Vue Router 就不会渲染任何东西。-------------------来自官方文档
看到我上面的例子你可以会想，直接就在van-tabbar这个组件中使用了to就可以直接跳转
其实这个是因为van-tabbar有属性，这个可以从Vant官方文档tabber中看到
如果没有这个属性：
应该需要再补充：
<router-link to="/">Go to Home</router-link>
<router-link to="/team">Go to Team</router-link>设置之后，我们就可以看到带跳转的路由；
