未古其人

目录

多级目录配置

在 router.js 中如下配置：

{
    path: 'devicegroup',
        name: 'south-devicegroup',
        meta: {
            title: '设备分组',
            icon: 'fad fa-flag-checkered'
        },
        component: resolve => require(['@/core/views/southapp/devicegroup'], resolbe),
        redirect: {
            name: 'south-devicegroup-redirect'
        },
        children: [
            {
                // 设备分组
                path: '',
                name: 'south-devicegroup-redirect',
                meta: {
                  icon: 'fad fa-flag-checkered'
                },
                component: resolve => require(['@/core/views/southapp/devicegroup/devicegroup'], resolve)
            },
            {
                // 设备分组
                path: 'detail',
                name: 'south-devicegroup-detail',
                meta: {
                  title: '分组详情',
                  icon: 'fad fa-flag-checkered'
                },
                component: resolve => require(['@/core/views/southapp/devicegroup/detail'], resolve)
            }
        ]
    },
}

然后在 devicegroup/index.vue 中写

<template>
    	<router-view />
</template>

但如果前端报了这样的错误：

ncaught (in promise) NavigationDuplicated: Avoided redundant navigation to current location: "/south/devicegroup/".
    at createRouterError (webpack-internal:///./node_modules/vue-router/dist/vue-router.esm.js:2066:15)
    at createNavigationDuplicatedError (webpack-internal:///./node_modules/vue-router/dist/vue-router.esm.js:2036:15)
    at HTML5History.confirmTransition (webpack-internal:///./node_modules/vue-router/dist/vue-router.esm.js:2329:18)
    at HTML5History.transitionTo (webpack-internal:///./node_modules/vue-router/dist/vue-router.esm.js:2261:8)
    at HTML5History.push (webpack-internal:///./node_modules/vue-router/dist/vue-router.esm.js:2602:10)
    at eval (webpack-internal:///./node_modules/vue-router/dist/vue-router.esm.js:3021:22)
    at new Promise (<anonymous>)
    at VueRouter.push (webpack-internal:///./node_modules/vue-router/dist/vue-router.esm.js:3020:12)
    at VueComponent.handleChangeMenu (webpack-internal:///./node_modules/cache-loader/dist/cjs.js?!./node_modules/babel-loader/lib/index.js!./node_modules/cache-loader/dist/cjs.js?!./node_modules/vue-loader/lib/index.js?!./src/core/components/base/sidebar.vue?vue&type=script&lang=js&:84:22)
    at invokeWithErrorHandling (webpack-internal:///./node_modules/vue/dist/vue.runtime.esm.js:1853:26)

可以在 router.js 中加入以下代码解决问题

/* 以下是避免多级目录配置时出现：
 * NavigationDuplicated: Avoided redundant navigation to current location
 * 错误而加的
 */
const originalPush = VueRouter.prototype.push

VueRouter.prototype.push = function push(location) {
  return originalPush.call(this, location).catch(err => err)
}