是前台为了实现单页面应用然后设置路径，根据不同的路径显示不同页面。但是这些路径在服务器上不是真是存在的
hash路由 默认的是hash路由
history路由
通过onhashchange()来检测路由的变化,根据不同的hash来显示不同元素。获取当前的hash值location.hash
通过onpopstate来检测history堆栈路径的变化，堆栈的路径是通过history.pushState(null, '',"?page=2")添加进去的
由hash路由设置成history路由，给路由添加配置项 mode="history"
1、设置相应组件
2、在router->index.js文件中添加配置
首先引入组件，然后配置规则 {path:设置路径，name:名，component:组件}
3、在需要现在组件的地方给页面添加<router-view></router-view>
4、设置导航路径
使用vue提供 <router-link to="路径"></router-link>默认的解析成a标签
5、设置默认路由
6、设置导航样式
1、需要定义组件
2、确定好在那个组件配置二级路由，就去那个组件的配置规则中添加children关键字，按照一级路由的配置方法配置规则
3、在需要配置二级路由的组件中添加router-view
4、设置导航 <router-link to="/ / ">
5、设置导航链接的样式
我们可以定义一个一级路由，里面可以包裹底部footer组件，让他为二级路由，这时点击底部的二级路由时，就会切换不同的页面，而不需要底部组件显示的时候，那我们在配置一个一级路由就好了！！！
具体的项目创建这里就不说了，直接参考官方文档就够了： 安装 | Vue.js (vuejs.org)不得不说，vite 是真滴强，速度比起webpack 快了好几倍，用过就真的回不去了。本次的实践是实现一个常见的后台管理系统，细节会尽量跳过，只集中在路由上面去展示和记录。
首先整个页面就是一级路由，通常会有登录页，报错页，主页之间的切换，这里也是做路由切换动画的主要地方。当顶部有导航菜单的时候红色框就是二级路由，以此类推绿色框就是三级路由。
创建好vue3项目的第一步就是安装vue-router ,因为vite 默认并没有安装的。参考官网： 安装 | Vue Router (vuejs.org)
然后在src 目录下创建router目录，并添加2个文件index.js,routes.js.
这里就要画重点了。因为vue3的过度动画transition组件跟vue2比变化还是比较大的。主要是以下的2各方面：
1.transition组件在vue 2 中是作为父级包裹路由router-view 的，到了vue3就反过来了
2.动画类名发生了一点变化，开始和结束变成了from 和 to ，所以不能直接吧vue2的过度动画复制过来，需要做一些改动。
