Ошибка при отображении файла vue.js с использованием экземпляра представления new Vue () - PullRequest
Новая
       15

Ошибка при отображении файла vue.js с использованием экземпляра представления new Vue ()

0 голосов
/ 30 ноября 2018

Я работаю с vue.js, при рендеринге страницы vue я получаю ниже

ошибка "Cannot GET / KForm"

Ниже приведен мой код в main.js 

import * as componentBase from "@app/app_start"
import Form from "@views/Form/Form.vue"
import KForm from "@views/KForm/KForm"
const NotFound = { template: '<p>Page not found</p>' }

const routes = {
    '/': Form,
    '/recap': Recap,
    '/KForm': KForm   
}

const app = new Vue({   
    ...componentBase,
    data: {
        currentRoute: window.location.pathname
    },
    computed: {
        ViewComponent() {
            return routes[this.currentRoute] || NotFound
        }
    },
    render: h => h(this.ViewComponent) 
}).$mount("#app")

1 Ответ

0 голосов
/ 30 ноября 2018

Я не уверен, какова ваша конфигурация веб-пакета, но не должен ли импорт KForm быть таким: 

import KForm from "@views/KForm/KForm.vue"
                                     ^^^^

currentRoute установлен на window.location.pathname только один раз когда создается экземпляр компонента.Когда вы щелкаете ссылку (или переходите прямо из адресной строки браузера), скажем, /KForm, местоположение окна изменяется, и браузер пытается извлечь веб-страницу по этому новому адресу, как на традиционной веб-странице, не относящейся к SPA.Это не будет выполнено, если сервер не ответит на этот URL.

Чтобы браузер не мог этого сделать, вам придется перехватывать <a> щелчки и использовать history API , чтобы изменить окноместоположение без перезагрузки страницы, затем измените currentRoute соответственно.

Или еще лучше, просто используйте vue-router , который сделает все это за вас.См. this для примера конфигурации сервера для режима истории HTML5.

...