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()來宣告依賴關係、設定模組的"瀏覽器全域性變數注入"型指令碼做依賴和匯出配置。
require.config({
baseUrl : "./src",
paths :{
jquery:"./lib/jquery.min",
vue:"./lib/vue",
vueResource:"./lib/vue-resource.min",
vueX:"./lib/vuex",
api :"./api/index",
lodash : "./lib/lodash.min",
bootstrap : "./assets/js/bootstrap/js/bootstrap.min",
ripples : "./assets/js/bootstrap-material-design/js/ripples.min",
material:"./assets/js/bootstrap-material-design/js/material.min"
},
shim : {
bootstrap : ['jquery'],
ripples:['jquery'],
material:['jquery'],
},
packages: [
{
name: 'components',
location: 'component',
main: 'components'
},
{
name : "vuex",
location :"vuex",
main : "vuex"
}//歡迎加入全棧開發交流圈一起學習交流：864305860
]//面向1-3年前端人員
});//幫助突破技術瓶頸，提升思維能力
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']
}
});//歡迎加入全棧開發交流圈一起學習交流：864305860
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);
});//歡迎加入全棧開發交流圈一起學習交流：864305860
return deferred.promise;
};
};
return resolve;
});
index
<body>
<header></header>
<router-view></router-view>
</body>
require(["vue", "vueRouter", "router", "header"], function(vue, vueRouter, router, header) {
vue.use(vueRouter);
var routes = new vueRouter({
routes: router
});//歡迎加入全棧開發交流圈一起學習交流：864305860
new Vue({
router: routes,
data: function(){
return {
aa: true
};
}
}).$mount("body");
});//歡迎加入全棧開發交流圈一起學習交流：864305860
結語
感謝您的觀看，如有不足之處，歡迎批評指正。
本次給大家推薦一個免費的學習群，裡面概括移動應用網站開發，css，html，webpack，vue node angular以及面試資源等。
對web開發技術感興趣的同學，歡迎加入Q群：864305860，不管你是小白還是大牛我都歡迎，還有大牛整理的一套高效率學習路線和教程與您免費分享，同時每天更新視訊資料。
最後，祝大家早日學有所成，拿到滿意offer，快速升職加薪，走上人生巔峰。