Vue 라우터 - 경로가 여러 번 연결됨

Vue 라우터 - 경로가 여러 번 연결됨

나는 Vue Router와 관련된 문제에 직면해 있고, 나는 무엇이 이것을 야기하는지 전혀 모른다...

내 애플리케이션이 로드되면 페이지 경로를 두 번 삽입한다.

예:

경로에 액세스할 경우http://localhost:8080/painel다음 경로가 브라우저에 표시된다.http://localhost:8080/painel/painel

페이지를 새로 고치면 다음과 같이 경로가 한 번 더 추가된다.http://localhost:8080/painel/painel/painel

내 파일:

/src/main.js

import Vue from 'vue'
import localforage from 'localforage'
import Notifications from 'vue-notification'

import App from './App'
import store from './store'
import router from './router'

import bus from './support/bus'
import http from './support/http'

Vue.config.productionTip = true

window._ = require('lodash')

localforage.config({
    driver: localforage.LOCALSTORAGE,
    storeName: 'invenio-center'
})

store.dispatch('auth/setToken').then(() => {
    store.dispatch('auth/fetchSystemData').catch(() => {
        store.dispatch('auth/clearAuth')
    })
}).catch(() => {
    store.dispatch('auth/clearAuth')
})

Vue.use(Notifications)

Vue.use(bus)
Vue.use(http)

new Vue({
    el: '#app',
    router,
    store,
    components: {App},
    template: '<App/>'
})

/src/snd/index.js

import Vue from 'vue'
import Router from 'vue-router'
import store from '../store'

import Login from '../pages/Login'

import Panel from '../pages/Panel'
import PanelIndex from '../pages/panel/Index'

Vue.use(Router)

const router = new Router({
    mode: 'history',
    routes: [
        {
            path: '/',
            name: 'login',
            component: Login,
            meta: {
                visitor: true
            }
        },
        {
            path: 'painel',
            component: Panel,
            meta: {
                auth: true
            },
            children: [
                {
                    path: '/',
                    name: 'panel.index',
                    component: PanelIndex
                },
                {
                    path: 'idr',
                    name: 'panel.idr',
                    component: PanelIndex
                }
            ]
        },
        {
            path: "*",
            redirect: {
                name: 'panel.index'
            },
            component: PanelIndex
        }
    ]
})

router.beforeEach(
    (to, from, next) => {
        store.dispatch('auth/setToken').then(() => {
            if(to.meta.visitor){
                next({
                    name: 'panel.index'
                });
                return;
            }
            next();
        }).catch(() => {
            if(to.meta.auth){
                next({
                    name: 'login'
                });
                return;
            }
            next();
        })
    }
)

export default router

/src/페이지/패널.부에를 하다

<template>
    <div class="panel-container">
        <router-view></router-view>
    </div>
</template>

<script>
    export default {
        name: 'Panel',
        data() {
            return {
            }
        }
    }
</script>

<style lang="scss" scoped>
    .panel-container {
    }
</style>

/src/페이지/패널/Index.vue

<template>
    <div class="index-container">index</div>
</template>

<script>
    export default {
        name: 'PanelIndex',
        data() {
            return {
            }
        }
    }
</script>

<style lang="scss" scoped>
    .index-container {
    }
</style>

이 방법을 사용해 보십시오. 추가/전에path: '/painel', 그리고 다른 요소들을 위해 그렇게 한다.

/상대 경로와 구별하기 위해 사용된다.

참조URL: https://stackoverflow.com/questions/53807973/vue-router-paths-being-concatenated-multiple-times