javascript - 请问这种路由的写法，要怎么才能让路由组件显示？

问题描述

问 题

问题：地址栏url的变化是正确的，但是路由到的组件并不显示出来

app.vue

  <div id="header">
    <router-link :to="{name: 'moduleName1'}">模块1</router-link>
    <router-link :to="{name: 'moduleName2'}">模块2</router-link>
    <router-link :to="{name: 'auto'}">自动化</router-link>
  </div>
  <router-view></router-view>

router.js

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

Vue.use(Router)
    
export default new Router({
  mode: 'history',
  routes: [{
      // 自动化
      path: '/auto',
      name: 'auto',
      components: {
      body: resolve => require(['../views/auto/index'], resolve)
      }
    },
    {
      // 模块名称1
      path: '/moduleName1',
      name: 'moduleName1',
      components: {
        body: resolve => require(['../views/moduleName1/index'], resolve)
      }
    },
    {
      // 模块名称2
      path: '/moduleName2',
      name: 'moduleName2',
      components: {
        body: resolve => require(['../views/moduleName1/index'], resolve)
      }
    }
  ]
})

但是路由换一种写法就是正常的，上面那种amd风格的异步加载路由组件的问题出在哪？之前用另一种异步加载的写法也没问题

import Vue from 'vue'
import Router from 'vue-router'
import auto from '@/views/auto'
import moduleName1 from '@/views/moduleName1'
import moduleName2 from '@/views/moduleName2'

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/auto',
      name: 'auto',
      component: auto
    },
    {
      path: '/moduleName1',
      name: 'moduleName1',
      component: moduleName1
    },
    {
      path: '/moduleName2',
      name: 'moduleName2',
      component: moduleName2
    },
  ]
})

解决方案

components: 当前的这个加了S后，默认加载的就是名为default的组件了

这篇关于javascript - 请问这种路由的写法，要怎么才能让路由组件显示？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！