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

Posted 2022-08-21 举止优雅的猪

其实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，来实现页面的跳转和传参，在之前的博客也有写过，在开始已经将链接附上，这里就不再赘述。