Vue根据菜单json数据动态按需加载路由Vue-router
文章 2589 0 0 0
发布时间:2019年08月06日

概述

Vue根据菜单json数据动态按需加载路由Vue-router

每个菜单项对应一个页面组件,根据菜单项动态按需加载路由

Vue根据菜单json数据动态按需加载路由Vue-router

路由配置的正确写法:

/router/index.js/

import Vue from 'vue' 
import Router from 'vue-router'
import url from './url'
import store from '../store'
Vue.use(Router)
const router = new Router({
    // mode: 'history',
    routes: url,
    scrollBehavior (to, from, savedPosition) {
        return {       x: 0,       y: 0     }
    }
}) 
router.beforeEach(({ meta, path, name }, from, next) => {
    let { auth = true } = meta
    let isAdmin = localStorage.getItem('admin')
    let isLogin = Boolean(isAdmin) // true已登录, false未登录
    if (auth && !isLogin && path !== '/login') {
        return next({ path: '/login' })
    }
    if (!auth && isLogin && path === '/login') {
        return next({ path: '/home' })
    }
    store.dispatch('CUR_MENU', name)
    next()
 })
 export default router

/router/url.js/

import data from '../store/data.json'
const Layout = () => import('@/pages/layout')
const Login = () => import('@/pages/login')
const NotFound = () => import('@/pages/notFound')
function getChildrenPath () {
    let childrenPath = []
    for (let i in data) {
        let sub = data[i].subMenu
        for (let j in sub) {
            let component = () => import('@/pages' + sub[j].path + '/index.vue')
            const item = {
                path: sub[j].path,
                name: sub[j].name,
                component: component
            }
            childrenPath.push(item)
        }
    }
    return childrenPath
}
const url = [
    {
        path: '/',
        component: Layout,
        children: getChildrenPath()
    },
    {
        path: '/login',
        meta: {     auth: false   },
        name: '登录页',
        component: Login
    },
    {
        path: '*',
        name: '404页',
        component: NotFound
    }
]
export default url

重点:let component = () => import('@/pages' + sub[j].path + '/index.vue')

动态路径写法,不能省略/index.vue

省略的话不会报错,页面加载也正常,但是会弹警告:

Vue根据菜单json数据动态按需加载路由Vue-router

评论专区