工程化（路由routher）

router可以译为路由器，在项目开发中是Vue.js官方的路由管理器，主要功能是实现组件的路由配置。
下面讲解一下路由router的使用步骤：
首先打开cmd让她跑起来；
（1）在src/main.js文件中引入相关模块及组件

vue-resource的用法：

在src/main.js入口文件引入并注册vue-resouorce，和上一个截图中“引入并使用vue-resource网络请求模块”

（1）在src/main.js入口文件中引入相关模块及组件
引入router目录下的index.js

此时会报错：找不到vue-router开发依赖，即未安装vue-router模块
控制台报错：找不到依赖，可以运行npm install-save ver-router进行安装
报错会显示：This dependency was not found：

• vue-router in ./src/router/index.js
  （2）安装Vue路由模块vue-router和网络请求模块vue-resource
  
  因为还需要安装网络请求模块vue-resource，所以这里直接一步安装、
  有的注意到，最后有一个–save参数，
  webpack安装插件时–save和–save-dev的区别：
  –save：将保存配置信息到package.json的dependencies节点中。
  –save-dev:将保存配置信息到package.json的devDependencies节点中。
  dependencies：项目生产依赖，发布后，及生产环境下还需要用的模块。
  devDependencies：项目开发依赖，里面的模块是开发时用的，发布时用不到它。
  （3）配置路由选项及渲染APP组件（src/main.js入口文件）
  
  （4）创建路由，配置路由映射并导出（src/router/index.js）
  前面在src下建了个router目录，然后在里面新建个index.js文件，这个文件负责写路由映射并导出
  先引入路由模块并使用
  
  require读取模块：
  1.创建路由实例：
  
  2.配置路由映射
  
  会有项目3个分页home、getJob和baseView，redirect重定向
  用require方法component加S
  3.导出路由配置
  
  4.方法2：import…from…读取模块
  
  
  注：用import…from… component不用加S
  路由router-404警告
  错误路由冲顶向如果为home，服务器将不再返回404错误页面，因为对于所有路径都会返回home页面。
  为了避免这种情况，重定向一个404页面
  
  
  5.设置链接router-link（src/App.vue）
  
  默认会渲染成一个‘’标签
  
  6.设置路由映射组件渲染router-view（src/App.vue）
  
  router-view要想显示对应a链接的页面组件信息，则需要router-view进行渲染展示
  7.设置路由映射组件渲染router-view（src/App.vue）
  此案例可以看出，当点击a链接(router-link)时，会显示起路由映射的组件页面。
  点击home和about导航会映射到对应的组件，然后将组件渲染在这里面。到此，整个流程我们已经走通了。