路由概念梳理

那我们第一步再来深化一下路由的概念

• 我们类比一下 我们说一个世界地图，有几个大洲，大洲下面是国家，国家下面还有省、市、县、村这么分下去

  
  世界地图

• 类比到我们路由中，世界地图就是主页World，世界下面还有亚洲，那就是World/Asia,那中国就是World/Asia/China，就这么分下去

  
  类比的路由

• 那我们的路由呢其实就是类似于我们的地址，每个页面的地址，亚洲/中国/广东，或者是/user/list/edit 那么理解了路由这个类比关系，我们就能说说路由怎么配

• 首先我们就需要对自己的页面，有一个概念，画出一个网站的地图，我们这个管理后台，是不是显示一个空窗体，代表整个世界，我们用/来表示，然后在这个空窗体里面呢，我们有登录页/login、注册页/reg、管理首页/home，然后在管理首页我们用一个地方来放我们的主要内容，比如用户列表/home/userList 圈子列表 /home/groupList，对吧这样有个网站地图，然后我们就可以先去写我们的页面了，比如我们写了注册页，这个登录页，写个主页，写了用户列表，然后我们需要在路由里配置他们，把他们连接起来

• 那怎么衔接起来呢，这里就会牵扯到JS（ES6）的语法以及Vue的原理，我们一直在用import来引入各种组件，这个就是ES6一个非常好的特性，支持我们便捷的分块的编写代码在分别引入。

• 我们说我们在main.js里实例化一个Vue实例

  
  
  

  Vue接受一个{}对象作为参数，对象中有这么几个属性，一是el，就是这个Vue实例的挂载点，这个属于高级内容，不展开，还有就是router，传入一个路由路由的实例化对象，作为Vue实例的路由表和路由配置。

• 这里的router变量，就是之前创建的一个VueRouter实例，这个实例传入了一个参数 RouterConfig

  
  

• 我们在往前看这个RouterConfig

  
  

• 这个是一个我们定义的对象，里面2个属性，一个是mode，是路由的模式，用history模式（不展开），另一个是router，接受一个路由表数组

• 这个Routers怎么来的呢，我们再往上来看

  
  

• 原来这个是从router.js里import的，那我们打开router.js看看

  
  

• 我们从上往下 首先import了需要的东西，这个后面详细说，然后顶一个一个叫做router的数组（数组用[]），这个数组就是我们经常编辑的路由表，里面是一个一个对象（用{}），每个对象就是一个平级的页面，比如这里的/和/index，/register就是平级的三个页面，这三个页面其实都是挂在App.vue的router-view下的，这是我们的第一级页面

  
  

• 然后我们看/index下面，有个属性叫做children,，就是这个页面的子页面，接受一个数组，数组里还是平级的对象页面，就这么一级一级分下去的

• 最后，吧这个routers这个数组给export出去，就是抛出去了，这就能让main来import了

• 我们来顺着捋一遍，首先我们创建一个routers的数组，存放路由表，然后创建一个RouterConfig对象，用来存放路由的配置，包括路由模式、路由表，然后我们把这个Config作为参数用来实例化一个VueRouter对象，然后我们再把这个对象作为参数，传给Vue实例。

• 我们刚刚router.js里的import没有说，我们展开说一下。我们刚刚说我们可以把一个代码段import进来，极大的优化了js工程的逻辑。在Vue工程中，我们的.Vue文件就是一个页面，我们在编写一个Vue文件的时候，都会这么写

  
  

• 就是把我们这个页面抛出去了，能给需要的地方去import，那么纵观整个工程，只有一个地方正真的import了我们写的页面，就是在router.js里，我们把页面import进来，作为一个路由的component属性，就是把一个页面赋给一个路由地址

• 所以这么一梳理，就发现为了我实例化Vue的时候，只传一个路由属性，就能构建我们这么多页面了