使用视图实例 new Vue() 渲染 vue.js 文件时出错

【问题标题】：Error in rendering vue.js file using view instance new Vue()使用视图实例 new Vue() 渲染 vue.js 文件时出错
【发布时间】：2019-05-02 14:02:46
【问题描述】：

我正在使用 vue.js，在渲染 vue 页面时，我在下面

错误“无法获取 /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")

【问题讨论】：

你检查views/KForm目录中是否存在名为KForm的文件？
基于Form的导入，可能需要将导入路径从KForm改为"@views/KForm/KForm.vue"。如果这不是问题，请告诉我们您在哪一行收到错误

标签： vue.js vue-component vuex vue-router

【解决方案1】：

我不确定你的 webpack 配置是什么，但 KForm 导入不应该是这样的：

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

currentRoute 设置为window.location.pathname 只有一次 当组件被实例化时。当您单击链接（或直接从浏览器的地址栏导航）到 /KForm 时，窗口位置会发生变化，并且浏览器会尝试在该新地址处获取网页，就像在传统的非 SPA 网页中一样。除非服务器响应该 URL，否则这将失败。

为防止浏览器这样做，您必须拦截<a> 的点击并使用history API 更改窗口位置而不重新加载页面，然后相应地更改currentRoute。

或者更好的是，只需使用 vue-router 即可为您完成所有这些工作。有关 HTML5 历史模式的服务器配置示例，请参阅 this。

【讨论】：