Vue Router - пути объединяются несколько раз - PullRequest
Новая
       9

Vue Router - пути объединяются несколько раз

0 голосов
/ 17 декабря 2018

У меня проблемы с 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 / 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>

1 Ответ

0 голосов
/ 17 декабря 2018

попробуйте это, добавьте / перед path: '/painel' и сделайте это для других компонентов.

/ используется для отличия от относительного пути.

...