Question

我遇到了Vue路由器的问题，不知道是什么原因造成的...

在我的应用程序加载时，它会两次插入页面路径。

示例：

如果我访问路径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/router/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/pages/Panel.vue

<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/pages/panel/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>

Answer 1

尝试此操作，在/之前添加path: '/painel'，然后对其他组件执行此操作。

/用于区分相对路径。

Vue路由器-路径被多次连接

1 个答案: