接后端接口静态路由+动态路由

最新推荐文章于 2025-03-01 02:05:15 发布

an_julia

最新推荐文章于 2025-03-01 02:05:15 发布

阅读量1.1k

点赞数 10

文章标签：前端

本文链接：https://blog.youkuaiyun.com/an_julia/article/details/134783610

版权

一般来说，`[前端项目]` 中的路由，很有可能是需要动态注册的。因为菜单可能在管理系统中维护，还跟权限绑定，用户登录以后，需要动态展示菜单。菜单往往跟路由挂钩，因此，路由需要动态注册

那么就分为前端默认路由和后端接口动态路由

1.前端默认路由可以存放一些登录页面 404 等公共页面

2.后端接口动态路由，就是根据用户的权限展示那些页面，由接口决定，在通过 `router.addRoute` 进行添加

在前端项目中 router 文件夹下面创建 index.js

import Vue from 'vue'
import VueRouter from 'vue-router'
import Main from '@/views/Main'
import Role1 from '@/views/role/role1'
import store from '@/store'
Vue.use(VueRouter)

// 静态路由
export const constantRoutes = [
    {
        path: '/login',
        name: 'login',
        component: () =>
            import( "@/views/LoginPage"),
        meta: {
            keepAlive: true,
            isTab: false,
            isAuth: false,
        },
    },
    {
        path: '/',
        component: Main,
        name: 'Main',
        redirect: '/home',
        children: [
        ]
    },
    {
        path: '/404',
        name: '404',
        component: () =>
            import('@/views/error/404'),
        hidden: true
    },
    {
        path: '/401',
        name: '401',
        component: () =>
            import( '@/views/error/401'),
        hidden: true
    },
   // {
   //     path: "*",
   //     redirect: "/404",
   // },

]


const router = new VueRouter({
    mode: 'hash',
    scrollBehavior: () => ({ y: 0 }),
    routes:constantRoutes
})

// 解决ElementUI报重复点击菜单错误
const originalPush = router.push
router.push = function push(location) {
    return originalPush.call(this, locat