# 路由表

提示

  • 路由表应该和菜单表分开
    • 路由表只能嵌套两级方便做组件缓存(组件名要唯一)
    • 菜单后台生成 减少更前端耦合

# 不授权模块


import Vue from 'vue'
import Router from 'vue-router'
import Layout from '@/layout'

Vue.use(Router)

/* Router Modules */
import menuRouter from './modules/menu'

/**
 * 所有角色都可以访问
 */
export const constantRoutes = [
  {
    path: '/login',
    component: () => import('@/views/login/index')
  },
  {
    path: '/chat-client/feedback',
    name: '投诉建议',
    component: () => import('@/views/feedback')
  },
  {
      path: '/chat-client/note',
      name: '留言咨询',
      component: () => import('@/views/note')
  },
  {
    path: '/net-error',
    name: '请求超时',
    component: () => import('@/views/error/net-error')
  },
  {
    path: '/404',
    component: () => import('@/views/error/todo')
  },
  {
    path: '/',
    component: Layout,
    redirect: '/home',
    name: '主页',
    children: [
      {
        path: 'home',
        name: '首页',
        component: () => import('@/views/home')
      }
    ]
  }
]

/**
 * 根据用户需要动态加载路由
 */
export const asyncRoutes = []
asyncRoutes.push(...menuRouter.menuRouter)

// 添加路由子模块
// constantRoutes.push(...menuRouter.menuRouter)

const createRouter = () =>
  new Router({
    // mode: 'history', // require service support
    scrollBehavior: () => ({ y: 0 }),
    routes: constantRoutes
  })

const router = createRouter()

export function resetRouter() {
  const newRouter = createRouter()
  router.matcher = newRouter.matcher // reset index
}

export default router

# 按权限动态渲染模块


import Layout from '@/layout'

const menuRouter = [
  {
    path: '/system-manager',
    component: Layout,
    redirect: '',
    name: '系统管理',
    children: [
      {
        path: 'user',
        name: '用户管理',
        component: () => import('@/views/system-manager/user')
      },
      {
        path: 'user/add',
        name: '新增用户',
        component: () => import('@/views/system-manager/user/add-page'),
        meta: { isTab: false, keepAlive: false }
      },
      {
        path: 'roles',
        name: '角色管理',
        component: () => import('@/views/system-manager/roles')
      },
      {
        path: 'roles/add',
        name: '新增角色',
        component: () => import('@/views/system-manager/roles/add-page'),
        meta: { isTab: false, keepAlive: false }
      }
    ]
  }
]

export default {
  menuRouter
}

# 过滤好后

  • 路径配备不到时 重定向到 404

// 404 page must be placed at the end !!!
  routerTree.push({ path: '*', redirect: '/404' })
  router.addRoutes(routerTree)

上次更新时间: 2019-12-1 1:02:28 AM