vite+vue3+ts中的vue-router基本配置

其实vue-router配置比较简单了，之前写过一篇非ts的配置：vite2 + vue3 中 vue-router4 基本使用(路由基本配置) 大家有兴趣可以看看，加上ts其实就是多了类型的约束，vue-router中已经给我们提供了RouteRecordRaw类型，可能我们需要在路由对象中自定义配置属性的时候就得去扩展一下RouteRecordRaw类型了，下面就介绍下

1. 首先安装 

npm i vue-router@4

2. 配置相关 

 ① 配置别名

vite.config.ts  

  

代码： 

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
const path = require('path')
import AutoImport from 'unplugin-auto-import/vite'
import Components from 'unplugin-vue-components/vite'
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'
 
// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    vue(),
    AutoImport({
      resolvers: [ElementPlusResolver()],
    }),
    Components({
      resolvers: [ElementPlusResolver()],
    })
  ],
  // 别名
  resolve: {
    alias: {
      //设置别名
      '@': path.resolve(__dirname, './src')
    }
  }
})

注意：如果这时候给你报一个require is not defind，我们可以 npm i @types/node --save-dev装一下，然后在tsconfig.json中配置compilerOptions.types: ["node"]，compilerOptions.paths: {"@": ["src"], "@/*": ["src/*"]}如果没报上面错误就可以忽略

报这个原因就是vite中不能使用require的，在vue-cli3搭建的vue2项目中可以使用是因为webpack帮我们解决了 

② 路由配置 

@/router/index.ts 

import { createRouter, createWebHashHistory, RouteRecordRaw } from 'vue-router'
import viewsRouter from './views'
import pageRouter from './page'
 
// 对RouteRecordRaw类型进行扩展
export type AddRouteRecordRaw = RouteRecordRaw & {
  hidden?: boolean
}
 
const router = createRouter({
  history: createWebHashHistory(),
  routes: [...viewsRouter, ...pageRouter] as AddRouteRecordRaw[]
})
 
export default router

我习惯将咱们的路由中的routes拆分开来，就是登录页、404页面、断网页面、锁屏页面等这类的页面单独放一块儿，放在page下，然后主要的业务页面放在views中 ，然后在这里统一引入一下就可以，可以看下这两个拆分开来的文件：

@/router/page/index.ts 

import { AddRouteRecordRaw } from '../index'
 
export default [
  {
    path: '/login',
    name: 'login',
    hidden: false, // 自定义添加的属性
    meta: {
      title: '登录'
    },
    component: () => import('@/page/login.vue')
  },
  {
    path: '/:pathMatch(.*)', // 或者 /:pathMatch(.*)*
    name: '404',
    hidden: false, // 自定义添加的属性
    meta: {
      title: '404'
    },
    component: () => import('@/page/notfount.vue')
  }
] as AddRouteRecordRaw[]

这里注意404页面，我们在vue2中给path设置*号就会匹配到任何找不到页面，然后我们就会给其跳转到我们自定义的404页面，但是在vue3中移除了*，这里要匹配404页面就得给path设置 "/:pathMatch(.*)"，或者 "/:pathMatch(.*)*"才可以

@/router/views/index.ts 

import { AddRouteRecordRaw } from '../index'
import Layout from '@/views/main.vue'
 
export default [
  {
    path: '/',
    component: Layout,
    name: 'main',
    meta: {
      title: '容器'
    },
    redirect: { path: '/index' },
    children: [
      {
        path: 'index',
        name: 'index',
        meta: {
          title: '主页'
        },
        component: () => import('@/views/pages/index.vue')
      }
    ]
  },
  {
    path: '/user',
    component: Layout,
    children: [
      {
        path: 'index',
        name: 'user',
        meta: {
          title: '用户管理'
        },
        component: () => import('@/views/pages/user.vue')
      }
    ]
  }
] as AddRouteRecordRaw[]

还需要注意的是，vue-router中给我们提供的 RouteRecordRaw  类型中，没有hidden这个属性，我们有时候可能会添加一些自定义属性，做一些想做的事，这时候就得对RouteRecordRaw类型进行扩展，就像上面我会自定义一个 AddRouteRecordRaw 类型对RouteRecordRaw类型进行扩展，及拿过来用的时候就使用 AddRouteRecordRaw 类型就可以了

最后在main.ts中引入并use一下即可 

代码： 

import { createApp } from "vue";
import App from "./App.vue";
import store, { key } from "./store";
import router from './router'
import 'element-plus/dist/index.css'
 
const app = createApp(App)
 
app.use(store, key).use(router)
 
app.mount("#app");

 然后路由使用是一样的，基本上就是通过 useRouter 和 useRoute，来实现页面的跳转和传参，在之前的博客也有写过，在开始已经将链接附上，这里就不再赘述。