vue中路由分模块配置

作者: 候鸟与暖风 | 来源:发表于2020-04-20 09:45 被阅读0次

由于项目越做越大,路由文件也越来越多,如果全部堆积到一个文件中,不仅不利于后期维护,也会增加开发者自己的困扰,有代码强迫症的我是没法接受的一个繁琐庞大而又难以维护的文件,看着就很头疼,所以我就开始构思如何把不同模块的路由分开放置,就像vuex一样

1.新建一个modules文件夹,里面放置不同模块的路由配置

image.png

例如模块post里面的路由


image.png

2.引入我们的模块

注意,这里我们使用的是es6中的...这个语法,它可以合并对象,数组等等,反正功能很强大

image.png

3.注入到new Router中即可正常使用啦

image.png

相关文章

  • vue入门(四)动态导入路由Router

    路由分模块动态导入 环境:vue3 常规路由配置 router/index.js 将路由按模块拆分 结构如下图 约...

  • vue中路由分模块配置

    由于项目越做越大,路由文件也越来越多,如果全部堆积到一个文件中,不仅不利于后期维护,也会增加开发者自己的困扰,有代...

  • vue的路由和路由守卫

    router 和 路由守卫 路由配置 分模块配置 404 配置 懒加载 active-class 路由守卫(跟 a...

  • 2019-07-14简单设置Nuxt.js中meta内容

    Nuxt.js 依据 pages 目录结构自动生成 vue-router 模块的路由配置。路由的配置可以参考官方的...

  • Nuxt.js路由

    路由 Nuxt.js依据pages目录结构自动生成vue-router模块的路由配置。 要在页面之间使用路由,我们...

  • Vue中路由的基本使用方法

    基本使用步骤 下载并引入 vue-router.js 模块创建路由配置对象 const routes = [ { ...

  • vue路由设置

    vue本身是不支持路由,想用的话就得引入一个模块vue-router 路由模块

  • Vue中如何配置路由

    Vue中如何配置路由 在json数据中加入路由配置image.png 在main.js中也将路由加入image.p...

  • vue路由的介绍(二)--vue动态路由和get的传值

    vue动态路由和get的传值---->同属于路由的传参 1,vue动态路由: 动态路由的配置: ①,在配置路由时加...

  • Vue中如何配置路由

    Vue中如何配置路由 在json数据中加入路由配置 在main.js中也将路由加入 最后要在router文件夹中i...

网友评论

    本文标题:vue中路由分模块配置

    本文链接:https://www.haomeiwen.com/subject/ohziactx.html