route-dynamic.md

Dynamic routing

There are times when we need to deal with adding a large number of pages with different styles (even these pages can be dynamically generated by the backend server), and if we have to write routes and resource groups for each page, then the section in index.html about the route configuration (path) can be very large, so we need a more flexible solution, and dynamic routing is made for this purpose.

The configuration name for dynamic routing is DynamicRouter, for example you can set "DynamicRouter":"/route" so that tmpUI will use the /route directory in the project directory as the directory where the dynamic routing configuration file is stored.

When accessing a route that is not configured in path, such as /test.html, if dynamic routing configuration is enabled, tmpUI will try to look for the file /route/test.html.json in the route directory, and if it finds it, it will read the resource group configuration from it and load the resource group to build the page.

For the example code, you can browse to /exampl/5/.
In this example, you can see that the configuration parameters in index.html look like this

var app = new tmpUI({
   "googleAnalytics": "G-4DGYKM9EHS",
   "siteRoot": "/example/5/",
   "loadingIcon": "/tpl/img/logo.png",
   "loadingPage": true,
   "dynamicRouter": "route",
   "loadingProgress": true,
   "languageDefault": "en",
   "language": {
       "en": "./lang/en.json",
       "cn": "./lang/cn.json",
   },
   "preload": {
       "bootstrap": {
           "/tpl/plugin/bootstrap4/jquery.min.js": { "type": "js", "reload": false },
           "/tpl/plugin/bootstrap4/bootstrap.bundle.min.js": { "type": "js", "reload": false },
           "/tpl/plugin/bootstrap4/bootstrap.min.css": { "type": "css", "reload": false },
           "/tpl/css/reset.css": { "type": "css", "reload": false },
       }
   },
   "path": {
       "/": {
           "title": "tmpUI App!",
           "preload": ["bootstrap"],
           "body": {
               "./tpl/index.html": { "type": "html", "target": { "type": "body" } },
               "./tpl/header.html": { "type": "html", "target": { "type": "id", "val": "tpl_header" } },
               "./tpl/footer.html": { "type": "html", "target": { "type": "id", "val": "tpl_footer" } }
           }
       }
   }
});