路由封装

安装VueRouter4

npm install vue-router@4 -S

快速入门使用

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

//引入组件
import home from '../components/home.vue'
import user from '../components/user.vue'

//创建路由
export default createRouter({
    history: createWebHashHistory(), //路由的模式
    linkExactActiveClass: 'active',  //点击路由跳转的底部样式标量
    //路由列表
    routes: [
        {
            //默认首页
            path: '/',
            name: 'home',
            component: home
        },
        {
            path: '/user',
            name: 'user',
            component: user
        }
    ]
})

使用场景

当我们在使用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文件
const ModulesFile = import.meta.globEager("./*/index.js")

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

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

RouterList.push({
  path:'/', //传参选项 query
  name:'home', //传参选项 params
  component: home,
  // meta:{ //自定义参数
  //   Auth:true, //自定义命名 比如Auth为true就是需要登录 否则不需要登录
  // }
})

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

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

src/routers/user/index.js

// 引入当前目录下面的所有文件
const ModulesFile = import.meta.globEager('./*.js')

// 路由集合
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
    }
]