vue-router不会加载/显示组件吗?

时间:2018-06-26 20:05:14

标签: vue.js vuejs2 vue-router

import Vue from 'vue';
import Router from 'vue-router';

//
// Application routes
//

const appRoutes = []

//
// let's add 404 page
// in the case we have landed on non-processed URL
//
import PageNotFound  from '@/lib/components/page-not-found';

appRoutes.push({
  path:      '*',
  name:      'PageNotFound',
  component: PageNotFound,
  meta:      {
    layout: 'DefaultLayout',
  },
});

Vue.use(Router);

export default new Router({
  mode:               'history',
  saveScrollPosition: true,
  routes:             appRoutes,
});

当我点击任何URL时(在路由器配置为path '*'时,这样的代码在浏览器中不会显示任何内容),但是如果我替换为异步负载

appRoutes.push({
      path:      '*',
      name:      'PageNotFound',
      component: () => import('@/lib/components/page-not-found'),
      meta:      {
        layout: 'DefaultLayout',
      },
    });

然后一切开始起作用。

Chrome控制台显示没有错误

2865:├─┬ eslint-plugin-vue@4.5.0
2866:│ └─┬ vue-eslint-parser@2.0.3
3912:├─┬ jest-serializer-vue@1.0.0
5629:│ └── vue-resize@0.4.4
5631:├── vue@2.5.16
5632:├─┬ vue-alertify@1.0.5
5640:│ └── vue@2.5.16 deduped
5641:├── vue-autosuggest@1.4.1
5642:├── vue-axios@2.1.1
5643:├── vue-class-component@6.2.0
5644:├── vue-error-boundary@1.0.1
5645:├── vue-extend-layout@1.1.2
5646:├── vue-head@2.0.12
5647:├─┬ vue-highlightable-input@1.0.5
5652:├── vue-i18n@7.8.1
5653:├─┬ vue-jest@2.6.0
5675:│ └── vue-template-es2015-compiler@1.6.0
5676:├─┬ vue-loader@14.2.3
5693:│ ├── vue-hot-reload-api@2.3.0
5694:│ ├── vue-style-loader@4.1.0 deduped
5695:│ └── vue-template-es2015-compiler@1.6.0 deduped
5696:├─┬ vue-meta@1.5.0
5700:├── vue-momentjs@0.1.2
5701:├─┬ vue-multi-select@3.5.1
5702:│ └── vue@2.5.16 deduped
5703:├── vue-progress-path@0.0.2
5704:├─┬ vue-property-decorator@6.1.0
5706:│ └── vue-class-component@6.2.0 deduped
5707:├─┬ vue-resize-directive@1.0.1
5710:├─┬ vue-responsive-components@0.2.3
5713:├── vue-router@3.0.1
5714:├─┬ vue-routisan@2.1.1
5715:│ └── vue-router-multiguard@1.0.3
5716:├── vue-select@2.4.0
5717:├── vue-spinner@1.0.3
5718:├─┬ vue-style-loader@4.1.0
5721:├─┬ vue-styled-components@1.2.3
5746:├── vue-svg-sprite@1.2.3
5747:├── vue-table-component@1.9.1
5748:├─┬ vue-template-compiler@2.5.16
5751:├── vue-toasted@1.1.24
5752:├── vue-truncate-filter@1.1.7
5753:├── vue-upload-component@2.8.9
5754:├── vue2-filters@0.3.0
5755:├─┬ vue2-sentry@1.2.1
5757:│ └── vue@2.5.16 deduped
5758:├── vue2-transitions@0.2.3
5759:├─┬ vuejs-uploader@0.6.5
5760:│ └── vue@2.5.16 deduped
5761:├── vuex@3.0.1
5762:├── vuex-cache@1.1.1
5763:├── vuex-class@0.3.1
5764:├── vuex-loading@0.3.0
5765:├─┬ vuex-search@2.2.1

有什么想法吗?

1 个答案:

答案 0 :(得分:0)

所以我不得不跑步

<?php
class Foo {
    public $test;

    public static function create(): Foo {
        $result = new self();
        $result->test = 123;
        return $result;
    }
}

class Bar extends Foo {
    public $baz;

    public static function create(): Foo {
        $foo = parent::create();
        $result = new self();
        foreach($foo as $property => $value) {
            $result->$property = $value;
        }
        $result->baz = 456;
        return $result;
    }
}

var_dump(Bar::create()); /* Outputs:
    object(Bar)#2 (2) {
    ["baz"]=>
    int(456)
    ["test"]=>
    int(123)
    }
*/

然后开始将项目中的代码从一个文件夹移到另一个文件夹,最后,一切正常,无需进行任何代码修改

当我一个个地复制文件夹时,我正在检查代码是否针对vue init webpack 生成的简单HelloWorld组件进行编译,然后开始导入配置,存储等,然后最后一切都与non -async在路由器配置中导入组件。

在我通过克隆文件夹(cp -R)开始新项目之前,也许是个问题。