vue3里面添加router, 本文这里面的主体环境为vue3, 在ts里面添加router，并且调试为history模式。
1、安装依赖包
npm install vue-router@4
这里面需要确定一下，vue3里面还是必须使用router4以上的版本，否则支持不是很友好。
2、 创建并且添加路由文件
创建router文件，在目录下面创建一个路由的index.ts，这里我创建在了/src/router/indec.ts下面，配置如下:
/**
ts版本的路由
2022年2月28日21:00:46
CL
*/
import { createRouter, createWebHashHistory, createWebHistory, RouteRecordRaw } from 'vue-router'
import login from '@/views/login/index.vue' // 自定义的 登录页
import LoginOut from '@/views/login/loginOut.vue' // 自定义的登出页
/**
* 定义路由模块
* 2022年2月28日21:41:54
* CL
*/
const routes: Array<RouteRecordRaw> = [
{
path: '/',
name: 'Login',
component: login
},
{
path: '/LoginOut',
name: 'LoginOut',
component: LoginOut
}
]
/**
* 定义返回模块
*/
const router = createRouter({
history: createWebHistory('/abc/'), // 设置为history模式，就是路径里面没有#, createWebHashHistory 是默认的，括号里面的就是基础路径，可以理解为项目名称，就是请求路径的基础url
routes
})
export default router
3、在main.ts里面引入router
import { createApp } from 'vue'
import App from './App.vue'
import router from './router' // 引入router
import Antd from 'ant-design-vue';
import 'ant-design-vue/dist/antd.css';
createApp(App).use(router).use(Antd).mount('#app') // 添加router使用
4、在app.vue里面添加路由组件
<template>
<router-view></router-view> // 添加路由组件
</template>
5、填坑
4版本的路由跟之前的有点不同，在配置history的时候，耽误点了时间，怪自己没有好好看，后来查看官网才看到，
createWebHashHistory： hasb版本的路由，就是路径里面含有#
createWebHistory: history的路由，路径里面不含有#
两个我只注意到了后面，都是history，所以一直拷贝的第一个，就导致录用一直带#好纠结。
