举例说明vue 根据菜单自动生成路由

好的，关于 Vue 根据菜单自动生成路由，实现起来可以这样：

1. 首先需要定义菜单，建议使用递归嵌套的形式，如下：

[
  {
    path: '/home',
    name: 'Home',
    meta: { title: '首页', icon: 'el-icon-s-home' },
    children: null,
  },
  {
    path: '/about',
    name: 'About',
    meta: { title: '关于', icon: 'el-icon-info' },
    children: [
      {
        path: '/about/company',
        name: 'AboutCompany',
        meta: { title: '公司简介', icon: '' },
        children: null,
      },
      {
        path: '/about/contact',
        name: 'AboutContact',
        meta: { title: '联系我们', icon: '' },
        children: null,
      },
    ],
  },
  // ...
]

2. 然后定义一个函数，根据菜单生成路由：

function generateRoutesFromMenu(routes) {
  const res = []
  routes.forEach(route => {
    const { path, name, meta, children } = route
    const component = () => import(`@/views/${name}.vue`)
    const data = { path, name, meta, component }
    if (children) data.children = generateRoutesFromMenu(children)
    res.push(data)
  })
  return res
}

3. 最后在路由配置中使用该函数生成路由：

import Vue from 'vue'
import Router from 'vue-router'
import menu from '@/menu.js'

Vue.use(Router)

const routes = generateRoutesFromMenu(menu)

export default new Router({
  mode: 'history',
  routes,
})

以上就是根据菜单自动生成路由的实现方式，希望可以对您有所帮助。