路由封装

使用场景

当我们在使用vue-router来进行路由封装的时候，就会需要用到该功能点

在用vue-router的时候会遇到需要引入当前文件夹下的所有文件例如引入module文件夹下所有的js文件

通常可以再module文件夹下建一个index.js 文件，然后在index文件里统一 export导出

但其实可以更方便，import.meta.globEager这个ES6方法可以满足需求，不需要再每次都要在index文件里导出了

这样操作我们还有一个好处就是可以让路由封装的路径与Components组件目录的路径一致

我们先可以看一下目录结构

组件的目录结构

components/
    user/
        base/
            index.vue
            login.vue
            profile.vue
            register.vue

        address/
            index.vue
            add.vue
            edit.vue

路由的目录结构

routers/
    user/
        base.js
        address.js
        order.js
        index.js

    product/
        cart.js
        product.js
        type.js
        index.js

    index.js

由此可见我们发现每个目录下面都有一个index.js这个文件，那么这个文件就是每个路由模块的入口文件

总入口文件

src/routers/index.js

//引入路由对象
import { createRouter, createWebHashHistory } from "vue-router"

// 设置一个默认首页
import Home from "components/home.vue"

// 引入每个目录下面的index.js文件  import.meta.glob('./*/index.js', { eager: true })
const ModulesFile = import.meta.glob('./*/index.js', { eager: true })

// 总路由集合
const RouterList = []

//提取每个对象下的值 同步获取
Object.values(ModulesFile).map(async mod => {
    if (mod.default) {
        // console.log(mod.default)
        RouterList.push(...mod.default)
    }
})



RouterList.push({
    path: '/', // 路径
    name: 'Home',
    component: Home  // 组件
})


// 创建一个总路由对象
export default createRouter({
    history: createWebHashHistory(),  //history模式 并且不会有/# 
    linkExactActiveClass: 'active',  //激活链接状态class名称
    routes: RouterList,   //routes
})

每个独立路由模块下面的index.js

src/routers/user/index.js

// 引入当前目录下面的所有文件
const ModulesFile = import.meta.glob('./*.js', { eager: true })

// 路由集合
const RouterList = []

//提取每个对象下的值 同步获取
Object.values(ModulesFile).map(async mod => {
  if(mod.default)
  {
    RouterList.push(...mod.default)
  }
})

//定义父组件
const layout = {
  template:`<router-view></router-view>`
}

//导出
export default [
  {
    path:'/user', // 父路由
    component:layout,
    //子路由分组   /user/order/xxxx
    children:RouterList
  }
]

其他的路由文件

src/routers/user/base.js

//引入组件
import index from '@/components/user/base/index.vue'
import login from '@/components/user/base/login.vue'
import register from '@/components/user/base/register.vue'
import profile from '@/components/user/base/profile.vue'

export default [
    //会员中心
    {
        // /user/base/index
        path:'base/index',
        name:'BaseIndex',
        component:index,
        meta:{ //如果路由中存在这个属性 就代表需要登录才能访问
            auth:true
        }
    },
    {
        //基本资料
        path:'base/profile',
        name:'BaseProfile',
        component:profile,
        meta:{
            auth:true
        }
    },
    {
        //登录界面
        path:'base/login',
        name:'BaseLogin',
        component:login
    },
    {
        //注册界面
        path:'base/register',
        name:'BaseRegister',
        component:register
    }
]

Vite配置

vite.config.js

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
//引入路径模块
import path from 'path'
// https://vitejs.dev/config/
export default defineConfig({
  resolve: {
    alias: {
      "@": path.resolve(__dirname, "src"),
      'vue': 'vue/dist/vue.esm-bundler.js' // 定义vue的别名，如果使用其他的插件，可能会用到别名
    },
  },
  plugins: [vue()],
})