vue.js - vue初始化项目问题

问题描述

问 题

我想把所有的路由都放到一个文件下管理

按照下面的代码执行时，执行没报错，然后发现页面上什么都没有

望大家指点一下。谢谢

./main.js

import Vue from 'vue'
import VueRouter from 'vue-router'
import routes from './router/index'

Vue.use(VueRouter)

const router = new VueRouter({
  routes
})

new Vue({
  router
}).$mount('#app')

./App.vue

<template lang="html">
  <div class="main">
    test
  </div>
</template>

<script>
export default {
}
</script>

<style lang="css">
</style>

./router/index.js

const routes = [
  {
    path: '/',
    name: 'index',
    // component: resolve => require(['../App.vue'], resolve)
    component: resolve => {
      require.ensure(['../App.vue'], () => {
        resolve(require('../App.vue'))
      })
    }
  }
]

export default routes

解决方案

如果是按我上述代码中的配置的话，在项目的主页index.html上还要加上一个<router-view>标签。
变成如下：

<div>
    <router-view></router-view>
</div>

这篇关于vue.js - vue初始化项目问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！