Vue路由模块化的实现方法

路由模块化

创建文件路径如下：

1. router/index.js

import Vue from 'vue'
import VueRouter from 'vue-router'
import home from './home'  //路由模块
import order from './order'  //路由模块

Vue.use(VueRouter)

const routes = [
  //首页
  home,

  //订单模块
  order,

  //首次加载时先走登录页
  {
    path: '/login',
    name: 'login',
    component: () => {
      return import("@/views/login.vue")
    }
  },

  //路由重定向
  {
    path: '/',
    redirect: "/login"
  }
]

const router = new VueRouter({
  mode: 'history',
  base: process.env.BASE_URL,
  routes
})

export default router

2. router/home.js 无子路由

/**
 * 首页路由
 */
export default {
    path:"/home",
    name:"home",
    component:()=> {
        return import("../views/home/index.vue")
    }
}

3. router/order.js 有子路由

/**
 * 订单路由
 */
export default {
    path: '/order',
    name: 'order',
    component: function () {
        return import('@/views/order/index.vue')
    },
    //子路由
    children: [{
        path: '/orderlist',
        name: 'orderlist',
        component: function () {
            return import('@/views/order/orderList.vue')
        },
    }]
}

4.main.js

import Vue from 'vue'
import App from './App.vue'
import router from './router'  //引入路由
import store from './store'

Vue.config.productionTip = false

new Vue({
  router,
  store,
  render: function (h) { return h(App) }
}).$mount('#app')

5.App.vue

注：<router-view></router-view>一定要写在App.vue页面

<template>
  <div class="app" v-if="isRouterAlive">
    <el-container>
      <!-- 头部 -->
      <el-header v-if="routeData.indexOf($route.name) === -1">后台管理系统</el-header>
      <!-- 左侧菜单 -->
      <el-container>
        <el-aside width="200px" v-if="routeData.indexOf($route.name) === -1">
          <!-- 菜单组件 -->
          <Menu />
        </el-aside>
        <!-- 内容部分 -->
        <el-main id="main">
        <!-- 展示路由 -->
          <router-view></router-view>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script>
import Menu from "@/components/element/Menu";
export default {
  name: "app",
  provide() {
    // 注册一个方法
    return {
      reload: this.reload, //  页面刷新
    };
  },
  data() {
    return {
      //需要占满整个屏幕的路由
      routeData: ["login", "404Error", "network"],
      isRouterAlive: true,
    };
  },
  components: {
    Menu,
  },
  methods: {
    //刷新功能
    reload() {
      this.isRouterAlive = false;
      this.$nextTick(function () {
        this.isRouterAlive = true;
      });
    },
  },
};
</script>

<style lang="less" scoped>
.app {
  font-size: 0.16rem;
  .main {
    font-size: 0.16rem;
  }
}
.el-header {
  color: #333;
  text-align: center;
  height: 0.6rem;
  line-height: 0.6rem;
  background-color: #3dedbe;
}

.el-aside {
  color: #333;
  height: calc(100vh - 0.6rem);
  background-color: #d3dce6;
}

.el-main {
  margin: 0;
  padding: 0;
  color: #333;
  background-color: #ffffff;
  height: calc(100vh - 0.6rem);
}
</style>

以上就是路由模块化的写法 自己总结的经验 若有不足 请大神指点