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 编译后根据路径访问某个页面