JS+Visual Studio Code

Question

打开的的网页是空白的(所用软件为Visual Studio Code)

这是router下的 index.js

import Vue from 'vue'
import Router from 'vue-router'
import index from '../components/index'
// import PageOne from '../components/PageOne'
// import PageTwo from '../components/PageTwo'
Vue.use(Router)


Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      name: '首页',
      component: Index,/*首页*/
    //   children:[/*子菜单*/
    //     {
    //       path: '/PageOne',
    //       name: '页面一',
    //       component: PageOne,
    //     },
    //     {
    //       path: '/PageTwo',
    //       name: '页面二',
    //       component: PageTwo,
    //     }
    //   ]
    }
  ]
})

这是router下的mian.js

// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'
import router from './router'
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'

Vue.use(ElementUI)
Vue.config.productionTip = false

/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  components: { App },
  template: '<App/>'
})

这是App.vue的代码

<template>
  <div id="app"> 
    <router-view/>
  </div>
</template>

<script>
export default {
  name: 'App'
}
</script>

<style>
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

这是App.vue里的main.js

// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'
import router from './router'
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'

Vue.config.productionTip = false

/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  components: { App },
  template: '<App/>'
})

Answer 1

• 这有个类似的问题, 你可以参考下: https://ask.csdn.net/questions/7481801
• 这篇博客也不错, 你可以看下router路由的配置和使用（详细教程）：main.js、App.vue、路由文件index.js之间的关系连接
• 除此之外, 这篇博客: 一文看懂vue 路由拦截中的 1.路由设置：router/index.js 部分也许能够解决你的问题, 你可以仔细阅读以下内容或跳转源博客中阅读:
  

• export default new Router({ 
   routes: [ 
    { 
     path: '/index', 
     name: 'index', 
     meta: { 		//自定义配置
      requireAuth: true // 加入此字段 进入页面前判断是否需要登陆 
     }, 
     component: Index 
    } 
   ] 
  })