vue-cli3 用路由配置多页面

之前有写过用vue.config.js中的pages节点配置多页，但是这样，每个页面都要有一个入口文件和入口vue（如app.js 和app.vue），

对于多个同样的项目，尤其是要利用到共同的通用配置，其实只需要写一个入口文件，入口vue，每个页面个性化写自己的页面，可以充分做到既通用又模块化

1、在src目录下新建router文件夹，文件夹下新建index.js，index.js中写每个页面的路径

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


/********************* 地图页面开始  ******************************** */
//地图页面
import map from '../components/map/index.vue';

// 地图监控页面
import flightMap from '../components/flightMap/index.vue';
/********************* 地图页面结束  ******************************** */
Vue.use(Router);

const routes = [{
        path: '/',
        redirect: '/map', //必须有配置这个路径，否则转发无效
        component: map,
        meta: { requiresAuth: true },
    },
    {
        path: '/map',
        name: 'map',
        component: map,
        meta: { requiresAuth: true },
    },
    {
        path: '/flightMap',
        name: 'flightMap',
        component: flightMap,
        meta: { requiresAuth: true },
    }
]

const router = new Router({
    mode: 'history',
    // base: 'D-Square',
    routes
});

export default router;

   2、在src/main.js中引入路由

import Vue from 'vue'
import App from './App'

new Vue({
    el: '#app',
    router,
    render: h => h(App)
})

   3、在src/App.vue中引入router-view

<template>
  <div id="app">
    <router-view v-if="isRouterAlive" class="view"></router-view>
  </div>
</template>

<script>
import Vue from 'vue'

export default {
  name: 'App',
  provide () {
    return {
      reload: this.reload,
    }
  },
  data(){
    return {
      isRouterAlive: true
    }
  },
  mounted () {
    
  },
  methods: {
    reload(){
      this.isRouterAlive = false;
      this.$nextTick(()=>{
        this.isRouterAlive = true;
      })
    }
  }
}
</script>

<style>
#app{
    width: 100%;
    height: 100%;
}
</style>

// WEBPACK FOOTER //
// src/App.vue

   4、在src/components下分别写每个页面

      如map页面，新建map文件夹，新建index.vue(名字可随意起，但是要和src/router/index.js中引入的组件名称一致)

5、npm  run  serve 编译后根据路径访问某个页面