vue-router 路由工具

使用体验

# 安装路由
yarn add vue-router@4

在 src 文件下新增 router 文件夹 再新增 index.ts 文件, 内容如下:
vue-router4.x 支持 typescript，配置路由的类型是 RouteRecordRaw

import { createRouter, createWebHistory } from 'vue-router'
import type { RouteRecordRaw } from 'vue-router'
const basicRouters: RouteRecordRaw[] = [
  {
    path: '/',
    name: 'Root',
    redirect: '/login'
  },
  {
    path: '/login',
    name: 'Login',
    component: () => import('@/views/login/Index.vue'), 
  }
]
const router = createRouter({
  history: createWebHistory(),
  routes: basicRouters,
})
export default router

修改入口文件 mian.ts挂载路由配置 :

import { createApp } from 'vue'
import App from './App.vue'
import router from './router/index'
const app = createApp(App)
app.use(router)
app.mount('#app')

根据路由配置的实际情况，需要在 src 下创建 views 目录，用来存储页面组件。

路由设计

└── src/
    ├── router/
        ├── modules/  // 根据业务划分路由模块
      ├── index.ts  // 路由配置文件

这里 meta 可以让我们有更多的发挥空间，这里提供一些参考：

• title:string; 页面标题，通常必选。
• icon?:string; 图标，一般配合菜单使用。
• auth?:boolean; 是否需要登录权限。
• ignoreAuth?:boolean; 是否忽略权限。
• roles?:RoleEnum[]; 可以访问的角色
• keepAlive?:boolean; 是否开启页面缓存
• hideMenu?:boolean; 有些路由我们并不想在菜单中显示，比如某些编辑页面。
• order?:number; 菜单排序。
• frameUrl?:string; 嵌套外链。

这里只提供一些思路，每个项目涉及到的业务都会存在些差异，这里就不作详细讲解了，根据自己业务需求做配置即可。