vue3 里面添加router

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，所以一直拷贝的第一个，就导致录用一直带#好纠结。