vue系列之requireJs中引入vue-router的方法

　　requireJs简介

　　参数配置

　　requireJS 常用的方法与命令也就两个，因此requireJS使用起来非常简单。

　　require
define

　　其中define是用于定义模块，而require是用于载入模块以及载入配置文件。

　　 define([id,deps,] callback); require(deps[,callback]);

　　加载配置文件

　　独立的引入配置文件也有两种方式，一种是通过script标签加载外部JS文件形式：

　　 <script src=js/require.js></script> <script src=js/app.js></script>

　　另一种方式则是使用 require 提供的 data-main 属性，该属性是直接写在引入require.js的script标签上，在require.js 加载完毕时，会自动去加载配置文件 app.js。

　　 <script data-main=js/app src=js/require.js></script>

　　通过 data-main 去加载入口文件，便会使配置对象中的 baseUrl 属性默认指向地址改为 app.js 所在的位置，相比之下我更加推荐这种方式，因为它更可能的方便快捷。

　　 <script data-main=js/app.js src=js/require.js></script>

　　注意：你在main.js中所设置的脚本是异步加载的。所以如果你在页面中配置了其它JS加载，则不能保证它们所依赖的JS已经加载成功。

　　常用参数配置

　　urlArgs

　　RequireJS获取资源时附加在URL后面的额外的query参数。作为浏览器或服务器未正确配置时的“cache bust”手段很有用。使用cache bust配置的一个示例：
javascript:;urlArgs: bust= + (new Date()).getTime()
在开发中这很有用，但请记得在部署到生成环境之前移除它。

　　deps

　　用于声明require.js在加载完成时便会自动加载的模块，值是一个数组，数组元素便是模块名。

　　config

　　config属性可以为模块配置额外的参数设定，其使用格式就是以模块名或者模块ID为key，然后具体的参数为value。

　　shim

　　shim为那些没有使用define()来声明依赖关系、设置模块的浏览器全局变量注入型脚本做依赖和导出配置。

　　vue项目

　　requirejs配置

　　 require.config({ baseUrl : ./src, paths :{ vue:./lib/vue, vueRouter: ./lib/vue-router, promise: ./lib/q, router: ./js/router, header: ./js/components/header }, shim : { vueRouter : [vue] } });

　　router配置

　　 define([resolve], function(resolve){ return [ { path: /home, name: home, component: resolve(../js/xx.js) }, { path: /news, name: news, component: resolve(../js/xx.js) } ]; });

　　resolve.js

　　 define([require, promise], function(require, Q){ var resolve = function(dep) { return function() { if (!(dep instanceof Array)) { dep = [dep]; } var deferred = Q.defer(); require(dep, function(res) { deferred.resolve(res); }); return deferred.promise; }; }; return resolve; });

　　index

　　以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。