首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >问答首页 >vue-路由器不加载/显示组件?

vue-路由器不加载/显示组件?
EN

Stack Overflow用户
提问于 2018-06-26 20:05:14
回答 1查看 214关注 0票数 0
代码语言:javascript
运行
复制
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 '*')时,这些代码不会在浏览器中显示任何内容,但是如果我替换为异步加载

代码语言:javascript
运行
复制
appRoutes.push({
      path:      '*',
      name:      'PageNotFound',
      component: () => import('@/lib/components/page-not-found'),
      meta:      {
        layout: 'DefaultLayout',
      },
    });

然后一切都开始运作了。

Chrome控制台显示无错误

代码语言:javascript
运行
复制
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

有什么想法吗?

EN

回答 1

Stack Overflow用户

发布于 2018-06-26 21:57:20

所以我不得不跑

代码语言:javascript
运行
复制
vue init webpack

然后开始将代码从一个文件夹移到另一个文件夹,最后,一切正常工作,没有任何代码修改。

当我一个一个地复制文件夹时,我正在检查代码是否针对vue init生成的简单HelloWorld组件进行编译,然后开始导入信任、存储等,然后所有操作都与路由器配置中组件的非异步导入一起工作。

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

票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/51050626

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档