详解如何写出一个利于扩展的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 相关文章推荐
jQuery数组处理代码详解(含实例演示)
Feb 03 Javascript
JS使用ajax方法获取指定url的head信息中指定字段值的方法
Mar 24 Javascript
javascript实现加载xml文件的方法
Nov 24 Javascript
javascript实现随机生成DIV背景色
Jun 20 Javascript
AngularJS 避繁就简的路由
Jul 01 Javascript
JS实现二叉查找树的建立以及一些遍历方法实现
Apr 17 Javascript
JS匹配日期和时间的正则表达式示例
May 12 Javascript
JavaScript中document.referrer的用法详解
Jul 04 Javascript
Vue 中的compile操作方法
Feb 26 Javascript
JS动画定时器知识总结
Mar 23 Javascript
vue css 引入asstes中的图片无法显示的四种解决方法
Mar 16 Javascript
antdesign-vue结合sortablejs实现两个table相互拖拽排序功能
Jan 08 Vue.js
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写出自己的BLOG系统 2
2010/04/12 PHP
Ubuntu中启用php的mail()函数并解决发送邮件速度慢问题
2015/03/27 PHP
php实现大文件断点续传下载实例代码
2019/10/01 PHP
JS运行耗时操作的延时显示方法
2010/11/19 Javascript
Extjs中ComboBox加载并赋初值的实现方法
2012/03/22 Javascript
用JavaScript修改CSS属性的代码
2013/05/06 Javascript
jQuery手动点击实现图片轮播特效
2020/04/20 Javascript
JavaScript String 对象常用方法详解
2016/05/13 Javascript
javascript数组对象常用api函数小结(连接,插入,删除,反转,排序等)
2016/09/20 Javascript
node.js基于mongodb的搜索分页示例
2017/01/22 Javascript
JS字符串去除连续或全部重复字符的实例
2018/03/08 Javascript
Vue 中的受控与非受控组件的实现
2018/12/17 Javascript
基于vue和bootstrap实现简单留言板功能
2020/05/30 Javascript
解决vue-router 切换tab标签关闭时缓存问题
2020/07/22 Javascript
vue-router定义元信息meta操作
2020/12/07 Vue.js
[02:03]风行者至宝清风环佩外观展示
2020/09/05 DOTA
零基础写python爬虫之抓取糗事百科代码分享
2014/11/06 Python
python生成圆形图片的方法
2020/03/25 Python
如何在python字符串中输入纯粹的{}
2018/08/22 Python
Python实现简单的列表冒泡排序和反转列表操作示例
2019/07/10 Python
nginx黑名单和django限速,最简单的防恶意请求方法分享
2019/08/09 Python
Python使用shutil模块实现文件拷贝
2020/07/31 Python
python 多线程共享全局变量的优劣
2020/09/24 Python
Python列表的深复制和浅复制示例详解
2021/02/12 Python
HTML5 拖放功能实现代码
2016/07/14 HTML / CSS
捷克鲜花配送:Florea.cz
2018/10/29 全球购物
意大利比基尼品牌:MISS BIKINI
2019/11/02 全球购物
一个C/C++编程面试题
2013/11/10 面试题
2014升学宴答谢词
2014/01/26 职场文书
新闻专业毕业生求职信
2014/08/08 职场文书
2014年社区党建工作汇报材料
2014/11/02 职场文书
2015年班组建设工作总结
2015/05/13 职场文书
vue3使用vue-router的完整步骤记录
2021/06/20 Vue.js
webpack的移动端适配方案小结
2021/07/25 Javascript
为什么MySQL选择Repeatable Read作为默认隔离级别
2021/07/26 MySQL
Java中try catch处理异常示例
2021/12/06 Java/Android