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

原创

举止优雅的猪 2022-08-21 00:59:01 博主文章分类：vue3 ©著作权

©著作权归作者所有：来自51CTO博客作者举止优雅的猪的原创作品，请联系作者获取转载授权，否则将追究法律责任

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

1. 首先安装

npm i vue-router@4

2. 配置相关

① 配置别名

vite.config.ts

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

代码：

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一下即可

vite+vue3+ts中的vue-router基本配置_设置别名_02

代码：

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");