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

2020-06-13 10:32:55易采站长站整理

},
shim : {
bootstrap : ['jquery'],
ripples:['jquery'],
material:['jquery'],
},
packages: [
{
name: 'components',
location: 'component',
main: 'components'
},
{
name : "vuex",
location :"vuex",
main : "vuex"
}
]});

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


<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
});
new Vue({
router: routes,
data: function(){
return {
aa: true
};
}
}).$mount("body");
});