vue-router 模块化思想

目录

前言

文件配置

modules文件夹

 index.js

---

前言

由官网介绍可知：vue-router 可是实现单页面复用 、动态路由选择 等 。但往往随着项目的初诞，而后逐渐扩大规模，需要的路由大大增加 。而如果将所有的引用 配置等都放在一个文件夹下 就显得极为臃肿。为降低耦合度，提高代码可读性，我们使用模块化。

文件配置

首先在Router文件夹下 创建 modules文件夹 和 index.js文件

modules文件夹

根据项目需求，在里面创建不同的路由文件(js)

在js文件里面，主要实现具体的路由映射

export default [
  {
    path: '/home',
    component: () => import('@/views/Home'),
  },
  {
    path: '/profile',
    component: () => import('@/views/Profile'),
    
  },
  {
    path:'/message',
    component: () => import('@/views/Message')
  }
]

 index.js

配置好moules后 ，就可以在index.js里面引入moules中的路由

import Vue from 'vue'
import VueRouter from 'vue-router'
import LoginRegister from './modules/LoginRegister'
 
const originalPush = VueRouter.prototype.push;
VueRouter.prototype.push = function push(location, onResolve, onReject) {
    if (onResolve || onReject) return originalPush.call(this, location, onResolve, onReject);
    return originalPush.call(this, location).catch(err => err);
};

Vue.use(VueRouter)


const routes = [
  {
    path: '/',
    redirect: '/login'
  },
   // moules的路由js文件中 ，默认export的是数组 
  ...TabBar,
  ...LoginRegister,
]

const router = new VueRouter({
  routes
})

export default router