Question

我正在使用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")

Answer 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。

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

1 个答案: