头图

Vue-Router的自动化挂载到Vue实例

一缕青丝断情愁

从事前端开发的小伙伴,只要是用Vue的,基本上都离不开路由管理插件-Vue-Router.

在中型或者大型项目开发的时候,经常性的就是一堆的路由配置在一个JS文件内,在团队协作中也好,还是在代码的可读性方面也好,这对于开发者来说,都不是一个特别好的实现方式。

我们如何将路由更为合理的来管理和处理呢?

多文件管理路由是什么?到底要不要拆成多文件管理路由?

  • 多文件管理路由指的是将路由的拆分成多个文件,按照模块拆分,这样方便路由的管理,更主要的是方便多人开发
  • 要不要拆成多文件管理路由取决于项目的大小,如果小型项目就十来个路由配置,个人觉得没必要本末倒置,无需拆解成多路由文件来进行路由管理。

如何实现自动化路由挂载?

1、 在 src 文件夹下,新建 router 文件夹

专人专事,用专门的文件夹来管理路由,这才是最优的解决方案

2、 在 router 文件夹下,新建入口文件 index.js

入口文件只做最基础的事情,那就是写好入口及重定向的地址(或者不重定向,具体根据业务定)

3、 在 router 文件夹下,新建 src 文件夹

避免项目过大或者模块过多时,router文件夹下,一大撂的JS文件,有碍观瞻。

4、入口文件 src/router/index.js 代码示例:

import Vue from "vue"
import VueRouter from "vue-router"

Vue.use(VueRouter);
let routes = []
// 将 src 文件夹下遍历得到的的路由文件,存储至routeFiles数组内
const routeFiles = require.context(
  "./src",
  true,
  /.js$/
);

// 遍历数组,将路由文件内的路由数据合并至数组内
routeFiles.keys().forEach((key) => {
  routes = [...routes,...routeFiles(key).default];
});

const router = new VueRouter({
  mode: "history",
  routes
});

router.beforeEach((to, from, next) => {
  // 此处是为了避免同路由作死的点,导致Console报错。个人强迫症,可无视
  if (to.path === from.path) {
    return
  }
  next();
});

export default router;

5、main.js 使用

import Vue from "vue"
import router from "./router"
// ... do something
new Vue({
  router,
  render: h => h(App)
}).$mount("#app")

总结

这样去维护路由的话,我们不需要在 router/index.js 内进行过多的引入,都是自动化的去挂载到路由对象内,减少维护成本
有更好实现方法的小伙伴,不妨在下面挥洒墨水
新人刚加入 思否 请大家多多关照,文笔不行。滑稽镇楼
阅读 125
110 声望
2 粉丝
0 条评论
你知道吗?

110 声望
2 粉丝
宣传栏