vue工程化之路由router

路由router

router可以译为路由器，在项目开发中是Vue.js 官方的路由管理器，主要功能是实现组件的路由配置。

路由router的使用步骤

1. 在src/main.js入口文件中引入相关模块及组件

   /* 引入并使用模块 */
   /*引入router下的index.js文件*/
   import router from './router';
   /*引入并使用vue-resource网络请求模块*/
   import VueResource from 'vue-resource';
   Vue.use(VueResource);
   

   用法：
   在 src/main.js 入口文件引入并注册 vue-resource，即上一节中的“引入并使用vue-resource网络请求模块”

2. 在src/main.js入口文件中引入相关模块及组件注意引入router目录下的index.js这一步骤。
   首先在src下新建个router目录，然后在里面新建个index.js文件。此时通过import router from './router’便可以识别里面的index.js文件。例如webpack配置文件webpack.base.conf.js中便可以默认识别config下的index.js文件
   
   
   此时会报错：找不到vue-router开发依赖，即未安装vue-route模块
   
   控制台报错：找不到依赖，可以运行npm install -save ver-router进行安装
   

3. 安装 vue 路由模块vue-router和网络请求模块vue-resource
   
   因为还需要安装网络请求模块vue-resource，所以这里直接一步安装
   有的会注意到，最后面有个–save参数，这个是用来干嘛的呢？

   save和save-dev区别

   webpack安装插件时–save和–save-dev的区别
   
   因为路由涉及到页面跳转，到后期项目生产环境中也会用到，所以这里用–save保存到项目生产依赖里。

4. 配置路由选项及渲染App组件（src/main.js入口文件）
   

5. 创建路由，配置路由映射并导出（src/router/index.js）
   方法1：
   之前在src下建了个router目录，然后在里面新建个index.js文件，这个文件负责写路由映射并导出，便于管理。

   首先引入路由模块并使用
   
   方法1：require读取模块
   第一步：创建路由实例
   
   第二步：配置路由映射
   
   第三步：导出路由配置
   
   上面案例也可以直接导出，即3步融合成2步
   
   方法2：import…from…读取模块
   除了上面写法外，在src/router/index.js文件，还可以这样配置，如下所示
   
   
   注意：这里是component，没加s

   路由router-404警告

   错误路由重定向如果为home，服务器将不再返回 404 错误页面，因为对于所有路径都会返回home页面。
   为了避免这种情况，最好再重定向到一个 404 页面。
   
   

6. 设置链接router-link（src/App.vue）
   
   使用 router-link 组件来导航，通过传入 to 属性指定链接， 默认会被渲染成一个 <a> 标签
   

7. 设置路由映射组件渲染router-view（src/App.vue）
   
   路由链接router-link会被渲染成a链接，router-view要想显示对应a链接的页面组件信息，则需要router-view进行渲染展示

8. 去除#（src/router/index.js）
   点击链接，此时可以实现页面跳转，但会发现，URL里有#
   
   去除# ，在路由实例里配置，添加mode为history
   

   拓展

   1）单页面富应用（Single Page Application - SPA）
   对于vue开发的单页面应用，我们在切换不同的页面的时候，可以发现html永远只有一个，这也真是称之为单页面的原因

   （2）懒加载
   单页面应用（Single Page Application - SPA） ，通过一个入口index.html，一次性加载（懒加载）所需的资源（js , css , img , font），所有操作通过 js 实现，包括 路由机制、网络请求和界面渲染 ，使用期间无需重新加载其他页面。（懒加载 ： 用的时候，再去加载）