1.在index.js文件中，设置总体结构

import Vue from 'vue'
import VueRouter from 'vue-router'

Vue.use(VueRouter)

import Blank from '@/components/global/blank.vue';
import Login from '@/components/global/Login.vue';

//这里进行路由路径的基本配置
let routes = [
    {
      path: "/",
      redirect: "login",
    },
    {
      path: "/login",
      name: "login",
      component: Login
    },
    {
      path: '/blank',
      name: 'blank',
      component: Blank, 
    },
    ...,
    ...,
    ...
];


// 导航守卫    //可以判断用户是否登陆    可以设置标题之类的
router.beforeEach((to, from, next) => {
    if (to.meta.title) { // 路由发生变化修改页面title
        document.title = to.meta.title
    }
    next()    //记得加上next
}

//解决重复点击路由报错
const originalPush = Router.prototype.push
Router.prototype.push = function push(location) {
  return originalPush.call(this, location).catch(err => err)
}

//解决重复点击路由报错
const originalReplace = Router.prototype.replace
Router.prototype.replace = function replace(location) {
  return originalReplace.call(this, location).catch(err => err)
}

export default router;

2.在main.js中导入，使用一下

你以为路由这么简单嘛，错了，我们要封装，要封装，要让代码变得优雅起来

3.每个页面，每个组件的路由进行拆分,例如

4.页面的代码如下：

//玩耍的页面路由
export default [
  {
    path: '/indexPage',
    name: 'eventPage',
    //设置通用模块，里面放置router-view,这样方便
    component: () => import('_com/global/indexPage.vue'), 
    redirect: '/eat',
    children: [
      {
        path: '404',
        name: '404data',
        component: () => import('./404notfind.vue') //404 
      },
      {
        path: '403',
        name: '403data',
        component: () => import('./403.vue') //403  
      },
      /************页面路由设置**************** */
      {
        path: 'eat',
        name: 'eat',
        component: () => import('_glo/eat.vue'), //吃的部分
      },
      {
        path: 'run/:secSceneType',
        name: 'run',
        meta: {
            keepAlive: true,    //可以在router-view处判断是否需要路由
        },
        component: () => import('./run.vue'), // 跑的部分
      },
    ]
  }
]

5.合并到router的index.js文件中

import play from './play.router';   //玩耍的页面路由

//在 new Router 之前，连接两个数组，合并在一起
routes = routes.concat(
  play,
);
//也可以直接解构赋值
routes = [...routes ,...play ]

const router = new Router({
  mode: 'hash',
  routes
});

 6.每个对象都代表了一个页面，每个页面都可以有子路由，所有设置通用路由页面后，不用经常写router-view，不过也要依情况而定

<template>
  <div id="app">
    <keep-alive>
      <router-view v-if="$route.meta.keepAlive" />
    </keep-alive>
    <router-view v-if="!$route.meta.keepAlive" />
  </div>
</template>