requirejs vue vue router簡單框架
阿新 • • 發佈：2017-11-14
web vue requirejs vuerouter
index.html 入口頁面
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>vue</title>
<link href="../css/index.css" rel="stylesheet">
<script src="../dist/js/requirejs-2.1.22.js"></script>
<script src="../js/common/base.js"></script>
</head>
<body>
<div class="panel" id="app">
<div class="panel-left">
<ul class="menus">
<li v-for="menu in menus"><a v-on:click="switchPage(menu)">{{menu.name}}</a></li>
</ul>
</div><!-- panel-left -->
<div class="panel-right">
<router-view></router-view>
</div>
</div><!-- panel -->
</body>
</html>base.js requirejs 配置文件
(function(){
requirejs.config({
baseUrl: "../js",
paths:{
"promise":"../dist/js/q",
"vue":"../dist/js/vue",
"vue.router":"../dist/js/vue-router.min",
"text":"../dist/js/text",
"css":"../dist/js/css.min"
},
waitSeconds: 15,
map:{
},
urlArgs: "version=" + Date.now(),
shim: {
promise:{
exports:"Q"
},
"vue": {
exports: "Vue"
},
"vue.router": {
exports: "VueRouter"
}
},
callback:function(){
},
deps:["vue","vue.router","promise","index"] // 默認要加載的js
});
})();index.js vue 入口
define(["vue","vue.router","common/routes"], function(Vue,VueRouter,routes) {
Vue.use(VueRouter);
var data = {
menus: [
{path: "/account", name: "賬戶管理"},
{path: "/authorization", name: "權限管理"},
{path: "/member", name: "會員管理"}
]
};
var router = new VueRouter({
routes:routes
});
var methods = {
switchPage:function(menu){
console.log(menu);
this.$router.push(menu.path);
}
};
var app = new Vue({
router:router,
el:"#app",
data:data,
methods:methods
});
});routes.js 路由配置
define(["common/ResolveComponent"], function(ResolveComponent) {
var routes = [];
routes.push({
path: ‘/account‘,
component: ResolveComponent("account/account_index")
});
routes.push({
path: ‘/authorization‘,
component: ResolveComponent("authorization/authorization_index")
});
routes.push({
path: ‘/member‘,
component: ResolveComponent("member/member_index")
});
return routes;
});ResolveComponent.js component懶加載工具
define(["require","promise"], function(require,Q) {
var resolve = function(dependency){
return function(){
if(!(dependency instanceof Array)){
dependency = [dependency];
}
var deferred = Q.defer();
require(dependency,function(res){
deferred.resolve(res);
});
return deferred.promise;
}
};
return resolve;
});requirejs vue vue router簡單框架