vite+vue3+ts+elementPlus前端框架搭建 [三] router路由管理

合集 - vue3-ts前端框架(3)

1.vite+vue3+ts+elementPlus前端框架搭建 [一]2023-08-022.vite+vue3+ts+elementPlus前端框架搭建 [二] pinia状态管理2023-08-02

3.vite+vue3+ts+elementPlus前端框架搭建 [三] router路由管理2023-08-10

收起

路由包括动态路由、静态路由两种，本文中以静态路由的方式实现了动态路由。

1. 创建Router

在Src目录下创建router文件夹，并在router文件夹下创建index.ts文件。

index.ts文件内容如下：

import { reactive } from "vue";
import * as VueRouter from "vue-router";
import { useUserStore } from "@/store/modules/user";
import { ElNotification } from "element-plus";
import dynamicRouter from "./dynamic";
import NProgress from "nprogress";
import "nprogress/nprogress.css";
NProgress.configure({ showSpinner: false });


//系统特殊路由

const routes_404 = {

path: "/:pathMatch(.)",

hidden: true,

component: () => import("@/layout/other/404.vue"),

};

let routes_404_r = () => {};

const routes = [

{

name: "layout",

path: "/",

redirect: "/dashboard",

component: () => import("@/layout/index.vue"),

children: [],

},

{

path: "/login",

component: () => import("../views/login/index.vue"),

},

];

const router = VueRouter.createRouter({

history: VueRouter.createWebHistory(),

routes,

// 刷新时，滚动条位置还原

scrollBehavior: () => ({ left: 0, top: 0 }),

});

var isLoadRouter = false;

router.beforeEach(async (to, _from, next) => {

const userStore = useUserStore();

NProgress.start();

if (to.path === "/login" && !userStore.user) {

//删除路由(替换当前layout路由)

router.addRoute(routes[0]);

//删除路由(404)

routes_404_r();

isLoadRouter = false;

next();

return false;

}

if (to.path === "/login" && userStore.user) {

next("/");

return false;

}

if (!userStore.user) {

next("/login");

return false;

}

//整页路由处理

if (to.meta.fullpage) {

to.matched = [to.matched[to.matched.length - 1]];

}

//加载动态路由  dynamicRouter 如果通过程序加载，可以通过localStorage在登录页面存入路由数据，并在这里localStorage取出来

if (!isLoadRouter) {

var menuRouter = filterAsyncRouter(dynamicRouter);

menuRouter = flatAsyncRoutes(menuRouter);

menuRouter.forEach((item) => {

router.addRoute("layout", item);

});

routes_404_r = router.addRoute(routes_404);

if (to.matched.length == 0) {

router.push(to.fullPath);

}

isLoadRouter = true;

}

next();

NProgress.done();

});

router.afterEach(() => {

NProgress.done();

});

router.onError((error) => {

NProgress.done();

ElNotification.error({

title: "路由错误",

message: error.message,

});

});

function filterAsyncRouter(routerMap) {

const accessedRouters: any[] = [];

routerMap.forEach((item) => {

item.meta = item.meta ? item.meta : {};

//处理外部链接特殊路由

if (item.meta.type == "iframe") {

item.meta.url = item.path;

item.path = /i/${item.name};

}

//MAP转路由对象

var route = {

path: item.path,

name: item.name,

meta: item.meta,

redirect: item.redirect,

children: item.children ? filterAsyncRouter(item.children) : null,

component: resolveComponent(item.component),

};

accessedRouters.push(route);

});

return accessedRouters;

}

// 加载.vue文件

const pages = import.meta.glob("@/views/**/*.vue");

const resolveComponent = (name: any) => {

const importPage = pages[/src/views/${name}.vue];

if (!importPage) {

return () => import(@/layout/other/empty.vue);

}

return importPage;

};

function flatAsyncRoutes(routes, breadcrumb = []) {

let res = reactive([]);

routes.forEach((route) => {

const tmp = { ...route };

if (tmp.children) {

let childrenBreadcrumb = [...breadcrumb];

childrenBreadcrumb.push(route);

let tmpRoute = { ...route };

tmpRoute.meta.breadcrumb = childrenBreadcrumb;

delete tmpRoute.children;

res.push(tmpRoute);

let childrenRoutes = flatAsyncRoutes(tmp.children, childrenBreadcrumb);

childrenRoutes.map((item) => {

res.push(item);

});

} else {

let tmpBreadcrumb = [...breadcrumb];

tmpBreadcrumb.push(tmp);

tmp.meta.breadcrumb = tmpBreadcrumb;

res.push(tmp);

}

});

return res;

}

//过滤树

function treeFilter(tree, func) {

return tree

.map((node) => ({ ...node }))

.filter((node) => {

node.children = node.children && treeFilter(node.children, func);

return func(node) || (node.children && node.children.length);

});

}


/i/${item.name}
/src/views/${name}.vue
@/layout/other/empty.vue
export default router;

2. 动态路由dynamic.ts

在动态路由dynamic.ts文件增加模拟动态路由内容。

dynamic.ts内容如下：

const routes = [
  {
    name: "home",
    path: "/home",
    meta: {
      title: "首页",
      icon: "ElemeFilled",
      type: "menu",
    },
    children: [
      {
        name: "dashboard",
        path: "/dashboard",
        meta: {
          title: "控制台",
          icon: "Menu",
          affix: true,
        },
        component: "home/index",
      },
      {
        name: "directive",
        path: "/other/directive",
        meta: {
          title: "指令",
          icon: "Flag",
        },
        component: "other/directive",
      },
      {
        path: "https://baidu.com",
        name: "外链百度",
        meta: {
          title: "外链百度",
          icon: "Link",
          type: "link",
        },
      },
      {
        path: "/other/fullpage",
        name: "fullpage",
        meta: {
          title: "整页路由",
          icon: "Monitor",
          fullpage: true,
          hidden: true,
          type: "menu",
        },
        component: "other/fullpage",
      },
    ],
  },
  {
    path: "/other/about",
    name: "about",
    meta: {
      title: "关于",
      icon: "InfoFilled",
      type: "menu",
    },
    component: "other/about",
  },
];
export default routes;

3. 在main.ts文件注册router

import router from "./router";
app.use(ElementPlus).use(store).use(router).mount("#app");