【问题标题】:Vue2: view-router exception when trying to use <router-view>Vue2:尝试使用 <router-view> 时出现视图路由器异常
【发布时间】:2017-08-31 07:17:49
【问题描述】:

我第一次尝试 Vue2 并被路线卡住了。

基本上,当我将&lt;router-view&gt;&lt;/router-view&gt; 添加到 index.html 时,我开始收到异常:

[Vue warn]: Failed to mount component: template or render function not 
defined.

found in

---> <Anonymous>
       <Root>

GitHub代码链接:https://github.com/kernelcurry/httpverbs-site/tree/c56ba0a45445f7d28c31cb6928471da3619a3327

我什至查找了有关此主题的视频教程,他们似乎没有问题,但我有。 (视频链接:https://laracasts.com/series/learn-vue-2-step-by-step/episodes/26

澄清一下,直到我将&lt;router-view&gt;&lt;/router-view&gt; 添加到index.html 之后才出现错误(线路链接:https://github.com/kernelcurry/httpverbs-site/blob/c56ba0a45445f7d28c31cb6928471da3619a3327/index.html#L10

我希望我能更深入地了解这里发生的情况,但我不知所措。感谢任何愿意查看代码并为我指明正确方向的人:)

【问题讨论】:

    标签: javascript html webpack vuejs2 vue-router


    【解决方案1】:

    如下更改您的src/routes.js

    import VueRouter from 'vue-router';
    import Home from './views/home.vue'
    import About from './views/about.vue'
    
    let routes = [
        {
            path: '/',
            component: Home
        },
        {
            path: '/about',
            component: About
        }
    ];
    
    export default new VueRouter({
        routes
    });

    【讨论】:

    • 成功了!但为什么?!为什么必须在文件顶部导入 *.vue 文件而不是内联?
    • 因为你的 vue 文件需要使用 webpack vue-loader 转换成普通的 javascript 模块,这是在你的构建过程中遇到导入时执行的。
    猜你喜欢
    • 2021-12-29
    • 1970-01-01
    • 2022-01-25
    • 1970-01-01
    • 1970-01-01
    • 2015-02-25
    • 2012-09-10
    • 2017-08-13
    • 1970-01-01
    相关资源
    最近更新 更多