详解如何写出一个利于扩展的vue路由配置


Posted in Javascript onMay 16, 2019

前言

从历往经验来看,开发一个新项目,往往在刚开始部署项目,到项目的正式交付,以及交付后的后续维护,功能增强等过程,都需要对项目的一些已有结构和逻辑进行调整。

因此,如果有些内容刚建项目时不考虑好未来的可扩展性,后续调整会很麻烦。

这里先来说,在vue项目中,如何写路由配置,更利于未来可扩展。

vue-router的基本配置

为了方便新学者的阅读与理解。先来看一下最基本的路由是如何配置的

// 0. 导入Vue和VueRouter脚本,如果使用模块化机制编程,要调用 Vue.use(VueRouter)

// 1. 定义 (路由) 组件。
// 可以从其他文件 import 进来
const Foo = { template: '<div>foo</div>' }
const Bar = { template: '<div>bar</div>' }

// 2. 定义路由
// 每个路由应该映射一个组件。
const routes = [
 { path: '/foo', component: Foo },
 { path: '/bar', component: Bar }
]

// 3. 创建 router 实例,然后传 `routes` 配置
// 你还可以传别的配置参数, 不过先这么简单着吧。
const router = new VueRouter({
 routes // (缩写) 相当于 routes: routes
})

// 4. 创建和挂载根实例。
// 记得要通过 router 配置参数注入路由,
// 从而让整个应用都有路由功能
const app = new Vue({
 router
}).$mount('#app')

如果具体还要什么不懂的,还是多看官方文档 把

便于扩展的路由设置

到这里我当你已经比较熟悉路由配置的相关知识哦,很细的知识点我就不细说了。

场景1

假设你现在接到一个新项目,产品经理要求你开发一个系统,给你的交互图等资料都是关于系统内部的各个页面。 这时你以为开发的这个系统就仅仅是直接展示系统内部的情况了,甚至你啥都没想,就直接开始配置路由写页面去了。
一开始你差不多写出了以下的路由配置:

// example 1
const router = new VueRouter({
  routes: [
    { path: '/page1', component: Page1 },
    { path: '/page2', component: Page2 }
  ]
});

像这种配置的,大概就猜出你把系统的菜单等公共部分都放在App.vue里写好了,然后通过一个<router-view/>进行系统内容的变更。

场景2

后面产品经理跟你说,要系统加一个官网、首页之类的存在。!!如果你配了按照上述的路由情况,此时,你是不是有点懵呢?因为你把系统的公共内容如菜单都写在App.vue上了,但是首页不需要系统的这些部分。
尽管你再配出了一个首页的路由,但是你也要想办法去掉那些已有的系统公共部分。

解决方案

所以我们不能采用上述配置方式。此时我们应该把系统本身作为一个路由,系统公共部分写在这个路由映射组件上,而系统内部各页作为子路由,嵌套在其下。

// example 2
const router = new VueRouter({
  routes: [
    { 
      path: '/'
      component: Main,
      children: [
        {
          path: '/page1',
          component: Page1
        },
        {
          path: '/page2',
          component: Page2
        }
      ]
    }
  ]
});

这里的Main组件就是系统的入口,菜单等公共部分就是写在这里
此时App.vue文件的内容应该就直接是一个路由入口了

<!-- App.vue -->
<template>
  <div>
    <router-view/>
  </div>
</template>

如果你一开始是这么写的话,那么要新增一些非系统内部的页面,简直就轻而易举了。如新增个首页,直接新增个一级路由就好了

// example 3
const router = new VueRouter({
  routes: [
    { 
      path: '/'
      component: Main,
      children: [...]
    },
    { 
      path: '/home'
      component: Home
    }
  ]
});

但是此时我们应该要知道,当仅输入你的网站域名(没有具体到哪页)时,会默认打开path: /的页面,上述例子就是默认打开系统页面了。

场景3

你的产品经理又来找事啦。再要求你添加个非系统页,如登录注册页,打开网站地址域名时默认跳转到登录页。
嗯,按照上一个配置情况,新增一个登录页简直so easy,但是要改默认打开页,这就尴尬了。

有人说,直接把系统的那个一级路由改一下不就好了嘛,然后把path: /留给要求默认打开的页面。

嗯,你说的很有道理,但我,不听!假设你系统里有比较多的跳转,从系统内某一页跳转到某一页的情况多,即你已经在代码里写了很多个$router.push('xxxx'),如果这么一改,很麻烦,要一个个找出来进行修改。

解决方案

因此,我们一开始的时候,就不应该为系统页直接占用path: '/'的路由。但是也不能为目前已知的任何一个页面占用path: '/',因为即使你现在明确哪个页面是默认打开页,但是你不能保证你的产品经理不会变心啊,万一后面又要改呢?

所以!我们要为目前已知的每个页面都设置路径名,而不能占用path: '/';而实现默认打开的功能,就要利用redirect进行跳转

// example 4
const router = new VueRouter({
  routes: [
    { 
      path: '/main'
      component: Main,
      children: [...]
    },
    { 
      path: '/home'
      component: Home
    },
    {
      path: 'login',
      component: Login
    },
    {
      path: '/',
      redirect: '/login'
    }
  ]
});

这样的话,不论后面怎么变化,你只需要做新增/删除路由 以及 改变redirect值控制打开默认页了。这就是最终的解决方案了

优化路由结构内容

还是在上一个例子结论的基础上进行这节的描述,假设你的系统比较大,有很多的页面,很多的模块,例如菜单栏中有比较多的一级菜单,而每个一级菜单下又有很多二级菜单甚至子孙菜单。

好,就算你现在拿到的需求是很少系统内容的,但是你也不能保证以后你的系统会发展成什么样,万一卖得很好,加很多功能需求呢。

在上述假设的条件下,那么你就得往children里加很多路由映射了

{ 
  path: '/main'
  component: Main,
  children: [...]
}

如此一来,你的这个文件,必定很长很长!因此,我们要拆分,进行模块化引入。

可以以你一级菜单的名字命名进行模块拆分,一个一级菜单对应一个文件(如果你的系统有功能模块的区分,那也可以按照功能模块来拆分文件),然后引入到这个主路由配置文件即可。

// example 5
...
import overview from './overview';
import copyrightManager from './copyrightManager';
import monitor from './monitor';

const router = new VueRouter({
  routes: [
    { 
      path: '/main'
      component: Main,
      children: [
        {
          path: '',
          // 默认进入的系统内部页
          redirect: 'overview'
        },
        ...overview,
        ...copyrightManager,
        ...monitor
      ]
    },
    { 
      path: '/home'
      component: Home
    }
  ]
});

这里例子中就是把原本写在children里边的一个个路由映射单独写在每个文件里(自己分类好),然后通过import引进来,利用...再把它放回进去。

这样维护起来就更加方便啦

总结

关于路由的配置优化介绍就说到这里了,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。 

Javascript 相关文章推荐
一个javascript参数的小问题
Mar 02 Javascript
jquery实现上下左右滑动的方法
Feb 09 Javascript
EasyUI在表单提交之前进行验证的实例代码
Jun 24 Javascript
jQuery删除当前节点元素
Dec 07 Javascript
bootstrap手风琴制作方法详解
Jan 11 Javascript
微信小程序 商城开发(ecshop )简单实例
Apr 07 Javascript
详解vue-router 2.0 常用基础知识点之router.push()
May 10 Javascript
JavaScript数据结构之优先队列与循环队列实例详解
Oct 27 Javascript
使用 Vue 绑定单个或多个 Class 名的实例代码
Jan 08 Javascript
JS实现动态生成html table表格的方法分析
Jul 11 Javascript
jQuery实现网页拼图游戏
Apr 22 jQuery
vue父子组件间引用之$parent、$children
May 20 Javascript
Vue中props的详解
May 16 #Javascript
使用Vue实现移动端左滑删除效果附源码
May 16 #Javascript
Vue2.0实现组件之间数据交互和通信操作示例
May 16 #Javascript
Mpvue中使用Vant Weapp组件库的方法步骤
May 16 #Javascript
JS左右无缝轮播功能完整实例
May 16 #Javascript
Node.js Windows Binary二进制文件安装方法
May 16 #Javascript
详解mpvue中使用vant时需要注意的onChange事件的坑
May 16 #Javascript
You might like
通过PHP current函数获取未知字符键名数组第一个元素的值
2013/06/24 PHP
php格式化电话号码的方法
2015/04/24 PHP
javascript表单验证 - Parsley.js使用和配置
2013/01/25 Javascript
浅谈JavaScript中null和undefined
2015/07/09 Javascript
JavaScript学习笔记之数组求和方法
2016/03/23 Javascript
AngularJS基础 ng-href 指令用法
2016/08/01 Javascript
详解node如何让一个端口同时支持https与http
2017/07/04 Javascript
Angular2环境搭建具体操作步骤(推荐)
2017/08/04 Javascript
EasyUI Tree树组件无限循环的解决方法
2017/09/27 Javascript
bootstrap table实现点击翻页功能 可记录上下页选中的行
2017/09/28 Javascript
基于Vuejs的搜索匹配功能实现方法
2018/03/03 Javascript
利用webpack理解CommonJS和ES Modules的差异区别
2020/06/16 Javascript
python在windows命令行下输出彩色文字的方法
2015/03/19 Python
python嵌套函数使用外部函数变量的方法(Python2和Python3)
2016/01/31 Python
python开发环境PyScripter中文乱码问题解决方案
2016/09/11 Python
python使用opencv进行人脸识别
2017/04/07 Python
Python科学画图代码分享
2017/11/29 Python
Django contenttypes 框架详解(小结)
2018/08/13 Python
Python:合并两个numpy矩阵的实现
2019/12/02 Python
python:解析requests返回的response(json格式)说明
2020/04/30 Python
opencv 实现特定颜色线条提取与定位操作
2020/06/02 Python
Python3中FuzzyWuzzy库实例用法
2020/11/18 Python
时尚孕妇装:HATCH Collection
2019/09/24 全球购物
Harrods英国:世界领先的奢侈品百货商店
2020/09/23 全球购物
Linux文件系统类型
2012/09/16 面试题
Java面试题:请说出如下代码的输出结果
2013/04/22 面试题
职业生涯规划书的格式
2013/12/29 职场文书
护理专业毕业生自荐信范文
2014/01/05 职场文书
社会学专业求职信
2014/02/24 职场文书
元旦获奖感言
2014/03/08 职场文书
中国文明网向国旗敬礼寄语大全
2014/09/27 职场文书
2015年小学校长工作总结
2015/05/19 职场文书
会议主持人开场白台词
2015/05/28 职场文书
新闻稿标题
2015/07/18 职场文书
MySQL系列之十五 MySQL常用配置和性能压力测试
2021/07/02 MySQL
Python 绘制多因子柱状图
2022/05/11 Python