我使用导演来建立SPA。当我在浏览器中输入网址http://127.0.0.1:8020/spa/index.html#/customerInfo/CL00005/billing
时,路由顺序为/customerInfo/:cumID/:infoType,/customerInfo/:cumID
。单击页面上的链接时,路由顺序为/customerInfo/:cumID,/customerInfo/:cumID/:infoType
。当我单击页面上的链接时,如何在浏览器中输入URL时,如何更改路由顺序。
router.js的代码:
define(['jquery', 'director'], function($, director) {
this.router = new Router().configure({
recurse: 'forward'
});
function resolveConfig(config, callback) {
if(config['require'] && typeof config['require'] === 'string') {
var resolvedConfig = {};
require([config['require']], callback);
} else {
callback(config);
// throw 'undefined config';
}
}
function register(url, routeConfig) {
router.on(url, function() {
var paramsName = routeConfig.paramsName;
var args = arguments;
var argLen = args ? args.length : 0;
var urlParamsLen = paramsName ? paramsName.length : 0;
var loopLen = argLen < urlParamsLen ? argLen : urlParamsLen;
var urlParams = {};
for(var i = 0; i < loopLen; i++) {
urlParams[paramsName[i]] = args[i];
}
var resolvedConfig = resolveConfig(routeConfig, function(loadedConfig) {
console.log(url);
console.log(routeConfig.name);
loadedConfig.onRoute({name:routeConfig.name,urlParams:urlParams});
});
});
}
return {
register: register,
initRoute: function (){
router.init('/home');
}
};
});
registeRoute.js的代码:
define(
[
"app/boot/router"
],
function(router) {
router.register('/home', {
name: 'home',
require: 'app/boot/contentViewModel'
});
router.register('/campaigns', {
name: 'campaigns',
require: 'app/boot/contentViewModel'
});
router.register('/promos', {
name: 'promotions',
require: 'app/boot/contentViewModel'
});
router.register('/help', {
name: 'help',
require: 'app/boot/contentViewModel'
});
router.register('/customerInfo/:cumID', {
name: 'customerMain',
paramsName: ['custNum','infoType'],
// require: 'app/boot/contentViewModel'
require: 'app/pages/customer/customerMainRoute'
});
router.register('/customerInfo/:cumID/:infoType',{
name : 'billShipInfo',
paramsName: ['custNum','infoType'],
require: 'app/pages/customer/customerMain'
});
router.initRoute();
});
startup.js的代码:
define(['jquery', 'knockout', './contentViewModel', './registeRouter', 'app/appConfig'], function($, ko, contentViewModel) {
ko.components.register(appConfig.components.nav.name, {
require: appConfig.components.nav.template
});
ko.components.register(appConfig.components.header.name, {
require: appConfig.components.header.template
});
ko.components.register(appConfig.components.empty.name, {
require: appConfig.components.empty.template
});
ko.components.register(appConfig.components.customerContact.name, {
require: appConfig.components.customerContact.template
});
ko.components.register(appConfig.components.customerHistory.name, {
require: appConfig.components.customerHistory.template
});
ko.components.register(appConfig.pages.home.name, {
require: appConfig.pages.home.template
});
ko.components.register(appConfig.pages.promotions.name, {
require: appConfig.pages.promotions.template
});
ko.components.register(appConfig.pages.campaigns.name, {
require: appConfig.pages.campaigns.template
});
ko.components.register(appConfig.pages.help.name, {
require: appConfig.pages.help.template
});
ko.components.register(appConfig.pages.customerMain.name, {
require: appConfig.pages.customerMain.template
});
ko.components.register(appConfig.components.billShipInfo.name, {
require: appConfig.components.billShipInfo.template
});
ko.applyBindings(contentViewModel);
});