Requirejs Vue Vue.Router Simple Framework


    VUE           `Menu`.`name`  
Base.js Requirejs configuration file
({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"] // The JS} to be loaded by default);}) ();


[” Vue “,” Vue.Router “,” Common / Routes “], Function (Vue, Vuerouter, Routes ) {Vue.use (Vuerouter); var data = {menus: [{path: “/ account”, name: “Account Management”}, {Path: “/ Authorization”, Name: “Permission Management”}}}} : “/ Member”, Name: “Member Management”}]}; 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 routing 


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 lazy loading tool  

Define ([“Require “,” promise “], function (require, q) {RETURN FUNCTION () {if (! (factory instanceof array) {dependency = [dependency];} var defred = q.defer (); Require (dependency, function (res);}); return deferred.promise;}}; return resolve;}};};};

  ACCOUNT_INDEX.JS  
DEFINE ([“text! ../../ pages / account / account_index.html”, “css! ../. ./css/account/account_index.crs “], function (Template) {var data = {list: [{id: 001”, name: “Xiao Wang”}, {ID: “002”, name: “大王”}, {id: “003”, name: “Old king”}]}; var methods = {Say: function (item) {alert (“I actually “+ item.name);}}; return {methods: methods, template: template, data: function () {return data}}};


Accessories: http://down.51cto.com/data/2368743
                     
© Copyright Notice
THE END
Just support it if you like
like0
share
comment Grab the couch

Please log in to comment