详解如何写出一个利于扩展的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 相关文章推荐
禁止刷新,回退的JS
Nov 25 Javascript
jQuery图片预加载 等比缩放实现代码
Oct 04 Javascript
cnblogs 代码高亮显示后的代码复制问题解决实现代码
Dec 14 Javascript
javascript Deferred和递归次数限制实例
Oct 21 Javascript
js实现简单鼠标跟随效果的方法
Apr 10 Javascript
轻松搞定js表单验证
Oct 13 Javascript
jQuery源码分析之init的详细介绍
Feb 13 Javascript
微信小程序开发之入门实例教程篇
Mar 07 Javascript
浅谈pc端rem字体设置的问题
Aug 03 Javascript
Angular6笔记之封装http的示例代码
Jul 27 Javascript
利用Bootstrap Multiselect实现下拉框多选功能
Apr 08 Javascript
通过GASP让vue实现动态效果实例代码详解
Nov 24 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
url decode problem 解决方法
2011/12/26 PHP
使用php伪造referer的方法 利用referer防止图片盗链
2014/01/20 PHP
详解WordPress中提醒安装插件以及隐藏插件的功能实现
2015/12/25 PHP
MooTools 1.2中的Drag.Move来实现拖放
2009/09/15 Javascript
JavaScript定义类的几种方式总结
2014/01/06 Javascript
浅析js中的浮点型运算问题
2014/01/06 Javascript
javascript与有限状态机详解
2014/05/08 Javascript
Javascript单元测试框架QUnitjs详细介绍
2014/05/08 Javascript
jquery ztree实现下拉树形框使用到了json数据
2014/05/14 Javascript
原生js结合html5制作简易的双色子游戏
2015/03/30 Javascript
通过JS和PHP两种方法判断用户请求时使用的浏览器类型
2016/09/01 Javascript
详解JavaScript的内置对象
2016/12/07 Javascript
JS实现给对象动态添加属性的方法
2017/01/05 Javascript
Html5 js实现手风琴效果
2020/04/17 Javascript
原生js和css实现图片轮播效果
2017/02/07 Javascript
bootstrap实现的自适应页面简单应用示例
2017/03/09 Javascript
Vue如何引入远程JS文件
2017/04/20 Javascript
React通过父组件传递类名给子组件的实现方法
2017/11/13 Javascript
tracking.js实现前端人脸识别功能
2020/04/16 Javascript
[02:04]2020年夜魇暗潮预告片
2020/10/30 DOTA
Python smallseg分词用法实例分析
2015/05/28 Python
Python实现处理管道的方法
2015/06/04 Python
python不换行之end=与逗号的意思及用途
2017/11/21 Python
Python开发之Nginx+uWSGI+virtualenv多项目部署教程
2019/05/13 Python
Django框架HttpRequest对象用法实例分析
2019/11/01 Python
基于MSELoss()与CrossEntropyLoss()的区别详解
2020/01/02 Python
解决Python 函数声明先后顺序出现的问题
2020/09/02 Python
Ubuntu权限不足无法创建文件夹解决方案
2020/11/14 Python
浅析python连接数据库的重要事项
2021/02/22 Python
CSS3中animation实现流光按钮效果
2020/12/21 HTML / CSS
澳大利亚人信任的清洁平台,您的私人管家:Jarvis
2020/12/25 全球购物
大学军训感言300字
2014/03/09 职场文书
运动会加油口号
2014/06/07 职场文书
公司开会通知
2015/04/20 职场文书
电力工程合作意向书
2015/05/11 职场文书
乱世佳人观后感
2015/06/08 职场文书