vue2.0下的spa整体方案（二）-src目录中的helper与router

helper 目录

这个目录在dmeo中无详细的调用与使用，这么的东西基本上就是可以拆分出来的助手函数

此目录是路由目录

在demo中路由目录中包含多个文件，index.js是汇总的路由文件

import Vue from 'vue'
import Router from 'vue-router'
import course from  '@/router/course'
import console from '@/router/console'
import teacher from '@/router/teacher'
Vue.use(Router);
const  router = new Router({
routes: [
  {
    path: '/',
    redirect:to=>{ return '/console' }
  },
  console,
  teacher,
  course
]
})
export default router

树状结构

一定要明白什么是树状结构啊~~~~~~~~

这个是vue的单页应用的核心概念。。。。。。

解释：

• 目前demo中的路由加载机制是使用的异步加载，详细的写法请参考demo
• export default router : 将路由器导出, export default router 是必不可少的
• @：@指的是src目录
• course,console,teacher：这些都是写在其他文件中的路由信息，如果再增加其他路由，是需要import的形式进行引入到这个文件，之后关联到routes下。

• 树状结构的路由（demo中只是详细的使用course模块的路由，以下会根据course进行demo的讲解）

  • 何为树状结构：
    所谓的树状结构也就是每个节点都会是下一个节点的根节点，所以我们在注册路由的时候就不会把所有的路由信息都注册到项目的根节点。下面举个栗子:

    • demo中的学员管理，对于学员管理这个模块来说他的根节点是app.vue，但是对于学员管理这个模块下的列表，详情页，添加，修改等等这些组件的跟节点是学员管理。所以我们会在模板目录中的course目录看到home.vue（名字不重要，重要的是在这个模板中的代码与app.vue一样，都挂载了router-view节点）

      

• 路由的定义写法：

  • 路由的命名最好与组件的模板名称对应，这样以后好找，路由文件都是.js的文件 ，以下是course的路由信息

    

    • 关键字:
      • name：路由的名称（这个在项目中是用来做菜单选中状态的，所以一定要写）
      • compoment：用来挂载组件 resolve=>require 是异步加载的写法
      • export default route : 是将route这个变量当成这个文件的返回值