后台管理（3）--- 路由管理（vue）

什么是路由呢？通过改变 URL,在不重新请求页面的情况下, 来更新视图，路由他分几种模式，常用的有hash模式和history模式等，其实大家可以简单理解成一个页面就代表一个路由, 所谓不重新请求网页更新视图，就是页面的跳转，然后还有一系列的传值，嵌套, 路由守卫等。下面我们一起讨论一下如何管理我们的路由。

大体思路

每个页面都是一个路由，所以我们每创建一个页面都要编写一个路由json。最主要的就是路由之前的嵌套（父子路由）,拿到一个项目之后通常侧边栏和顶部是固定的（这里的固定是指通常不会随着页面跳转而改变的模块），然后右边的区域是点击会发生变化的，也就是跳转，比如跳到home页面啦、跳到A页面啦等等，这三部分（上左下）通常我们认为会在同一级路由里我们也可以认为是“顶层路由”，然后右边这部分是“顶层路由”的子路由，登录页面和顶层路由同级。我们还要通过路由守卫来判断用户是否有权限跳转到对应页面

代码基于GitHub - wangkai123456/learnVueAdmin at v3

编写路由文件

1、分模块编写
按照页面功能划分路由模块，相同的功能页面放到一个路由文件里。
优点：方便管理，结构清晰
缺点：如果权限管理方案设定的是路由由服务端返回则不太方便。（个人感觉服务端返回路由有点鸡肋~）

A模块路由编写

然后在router/index.js 页面引入，这里有个小坑，我们这里虽然用的是require的引入的模块，但并不是按需加载的，比如我们打完包就会发现随便他分开了几个文件，但是那些文件是没有内容的，如果要用路由懒加载还需要进行配置，这里只是入门教程暂时不涉略路由懒加载这块有兴趣的可以参考路由懒加载 | Vue Router

路由引入页面

2、所有的路由集中存放
优点：方便服务端一把锁给你
缺点：不方便管理

这里就不放图了，跟之前的v2的一样

路由嵌套

在项目初始化之后（vue-cli）会有一个app.vue这个页面，这个页面就用来放顶层路由，主要用来显示刚才说的那三部分内容（上、左、右）和登录页面

顶层路由的位置

我们会创建一个pages目录去存放我们所有的页面，包括顶层路由的哪些页面，然后在这个文件里面我们会把顶层路由和子路由分开。pages 目录直接存放顶层路由页面，pages/Main目录存放子路由页面

pages目录

在main文件里编写子路由，以及提到过的侧边导航栏和顶部导航栏

入口页面

路由跳转及传参

路由跳转方式有许多，总图来说都是参照window.history 这个api。传参呢，建议直接跟网页传参一样？拼接，如果公司有需求不允许这样，或者要求刷新一下传的就要消失，则可以采用param的方式传参，这里详情可以参照编程式的导航 | Vue Router

传参简介

路由守卫

路由守卫，也就是路由的钩子函数，每次路由发生跳转的时候都会触发，并且我们可以阻止路由继续跳转，我们可以录用这一特性来判断用户是否符合对应路由的权限，下面我们简单来判断用户是否有token如果没有则直接跳转到登录页面。这里并不做路由守卫函数的具体介绍只进行了业务场景使用的介绍，有兴趣了解路由守卫函数的同学导航守卫 | Vue Router

路由守卫

总结

在项目中，我们用路由进行页面的管理，主要理解他们是如何嵌套的，以及如何跳转，路由跳转传参不建议传到参数过多，可以简单传个id之类的参数，当我们传的参数过多的时候我们就要考虑使用vuex来管理我们的参数了，然后 刚开始了解的时候并不推荐一次性全部掌握，先从上面的那些基础的入手,当我们能够写这些的时候，再去深入了解更多的玩法。大家有哪些地方希望一起讨论的欢迎留言。