Router and Menu

By default, layout-related components will automatically obtain the required routes information from vue-router

Format

The meta type

import type { Component } from 'vue'
import 'vue-router'

declare module 'vue-router' {
  interface RouteMeta {
    /** the Menu title */
    title?: string
    /** the Menu icon */
    icon?: string | Component
    /** whether to show in the Menu */
    hidden?: boolean
    /** whether to use ElMenuItemGroup instead of ElSubMenu */
    group?: boolean
    /** the animation name of transition pages */
    transition?: string
  }
}

refer router

import { markRaw } from 'vue'
import { Edit } from '@element-plus/icons-vue'
import BaseLayout from '../layout/Layout.vue'
import type { RouteRecordRaw } from 'vue-router'

const routes: RouteRecordRaw[] = [
  {
    path: '/dev/',
    redirect: '/dev/Layout',
    component: BaseLayout,
    meta: { title: 'Development', icon: markRaw(Edit) },
    children: [
      {
        path: '/dev/Layout',
        component: () => import('../views/Layout.vue'),
        meta: { title: 'Layout' },
      },
      {
        path: '/dev/Table',
        component: () => import('../views/Table.vue'),
        meta: { title: 'Table' },
      },
      {
        path: '/dev/Form',
        component: () => import('../views/Form.vue'),
        meta: { title: 'Form' },
      },
      {
        path: '/dev/Crud',
        component: () => import('../views/Crud.vue'),
        meta: { title: 'Crud' },
      },
    ],
  },
]

export default routes

Use icon

The Icon render as a components, so you can define as any icon component.

Install the required icon component library

Let’s use @element-plus/icons-vue as an example

yarn add @element-plus/icons-vue
# or
npm install @element-plus/icons-vue
  • Globally register
import { Edit } from '@element-plus/icons-vue'

app.component(Edit.name, Edit)

{
  name: 'admin',
  path: '/admin',
  component: Layout,
  meta: { title: 'Admin', icon: 'edit' },
}
  • Use components
import { markRaw } from 'vue'
import { Edit } from '@element-plus/icons-vue'
// ...
{
  name: 'admin',
  path: '/admin',
  component: Layout,
  meta: { title: 'Admin', icon: markRaw(Edit) },
}

Dynamic Routing

Components can only obtain the original routing information defined in vue-router, and cannot obtain dynamically added routes. When using asynchronously generated dynamic routes, although you can pass prop ​​to the component through routes, it is more recommended to dynamically increase it through the following methods. Just keep router.options.routes the same as the final dynamically added routes

const newRoute = {
  name: 'admin',
  path: '/admin',
  component: Layout,
  meta: { title: 'Admin' },
  children: [
    {
      path: 'settings',
      component: AdminSettings,
      meta: { title: 'Settings' },
    },
  ],
}
router.addRoute(newRoute)
router.options.routes.push(newRoute)

Auth Routing

The current component does not support auth routing, you need to manually add

Example: by Dynamic Routing, remove routing information that does not have access rights when generating or adding routes

Or: use router.beforeEach to check routing information

Of course you can also combine the two way