引言

众所周知，Web 系统的早期路由是由后端来实现的，服务器根据 URL 来重新加载整个页面。这种做法用户体验不但不好，而且页面若是变得复杂，服务器端的压力也会随之变大。随着 Ajax 的广泛应用，页面能够做到无需刷新浏览器也可更新数据，这也给单页应用和前端路由的出现奠定了基础。因此，在单页应用系统中使用前端路由也十分常见，很多前端框架也提供或者推荐配套使用的路由系统。san-router 是 San 框架的官方 router，以方便用户基于 san 构建单页或同构应用为目标。本文也主要来说明实践过程中如何使用 san-router 来构建一个单页面后台管理系统。

路由配置

使用 san-router 和 San 构建单页应用的系统主要基于路由和组件。路由处理放在浏览器端来直接响应浏览器地址的变换，分发到对应的路由。在路由发生变化时，通过加载相应的组件，替换需要改变的部分，来向用户呈现对应的界面。所以路由配置是比较关键的一步。

单页应用系统中应该创建一个入口 js 文件(如 main.js )，在其中可以配置相关路由，attach 一个根组件，并将路由的 target 设置为根组件中的标签:

  1. // main.js
  3. import san from 'san';
  4. import {router} from 'san-router';
  5. import App from './App.san';
  7. // attach 根组件 App
  8. new App().attach(document.getElementById('app'));
  9. // 路由规则
  10. const routes = [
  11.     {
  12.         rule: '/',
  13.         Component: Home
  14.     },
  15.     {
  16.       rule: '/list',
  17.       Component: List
  18.     },
  19.     {
  20.       rule: '/about',
  21.       Component: About
  22.     }
  23. ];
  24. // 将路由规则的 target 属性设置为根组件中的标签
  25. routes.forEach(item => {
  26.     router.add({
  27.         ...item,
  28.         target: '#main'
  29.     });
  30. });
  31. // 设置路由模式 'html5 | hash'
  32. router.setMode('html5');
  33. // 设置路由监听
  34. router.listen((e, config) => {
  35.     // 在路由发生变化时触发
  36.     console.log(e);
  37.     console.log(config);
  38. });
  39. // 启动路由
  40. router.start();

在路由规则配置过程中，通过调用 router.add({Object}options) 来添加路由规则，在 options 对象中指定 Component 和 target 参数。将特定的 URL 规则映射到相应的组件类上，在 URL 变化并匹配路由规则时，将对应逻辑子组件初始化并渲染到页面中。

san-router 有两种路由规则配置:
rule 为 string 时，URL 的 path 部分与字符串完全匹配才可
rule 为 RegExp (正则)时，URL 的 path 部分与该正则部分匹配即可

路由规则配置完成后，可以通过调用 setMode 方法来设置路由模式，通过调用 listen 方法来添加路由监听器，当发生路由行为时被触发。

最后，可通过调用 start 方法来启动路由，根据 URL 的变化来匹配规则，渲染相应的组件到界面上。

App根组件

App 作为根组件，布局了整个系统界面不需要更新的部分，搭建出了系统界面基本的骨架。那些需要更新的部分则是在 App 组件被附加到页面后，通过启动路由，来加载不同的逻辑组件，渲染到路由规则 target 属性对应的标签里:

  1. // App.san
  3. // Link 组件
  4. import {Link} from 'san-router';
  6. // App Component
  7. class App extends san.Component {
  8.     static components = {
  9.       'router-link': Link
  10.     };
  11.     static template = `
  12.           <div class="app-container">
  13.             <div class="app-drawer">
  14.                 <div class="drawer-title">
  15.                   <h3>XXX管理系统</h3>
  16.                 </div>
  17.                 <div class="menu">
  18.                     <ul>
  19.                         <li><router-link to="/">Home</router-link></li>
  20.                         <li><router-link to="/list">List</router-link></li>
  21.                         <li><router-link to="/about">about</router-link></li>
  22.                     </ul>
  23.                 </div>
  24.             </div>
  25.             <div class="app-bar">
  26.                 <div class="user-info">
  27.                     <span>userName</span>
  28.                 </div>
  29.             </div>
  30.             <div class="app-content">
  31.               <!-- 逻辑组件渲染处 -->
  32.               <div id="main"></div>
  33.             </div>
  34.            </div>
  35.     `;
  36. }

逻辑子组件

逻辑子组件是指根据路由匹配规则渲染到页面中的业务逻辑组件。这些组件按照业务逻辑，由基础组件库中的组件组装而成，在匹配到对应路由时，进行初始化和渲染。

逻辑子组件是正规的 san 组件，每一个逻辑子组件可以放在一个单独的文件里，调用基本组件库来组装而成，设置在不同生命周期阶段想要处理的业务:

  1. // About.san
  3. class About extends san.Component {
  4.     static template = `
  5.         <p>关于关于</p>
  6.     `;
  7.     initData() {
  8.         return {};
  9.     }
  10.     route() {}
  11.     attached() {}
  12. }
  14. // List.san
  16. class List extends san.Component {
  17.     static template =  `
  18.         <p>list,list</p>
  19.     `;
  20.     initData() {
  21.         return {};
  22.     }
  23.     route() {}
  24.     attached() {}
  25. }
  27. // Home.san
  29. class Home extends san.Component {
  30.     static template = `
  31.         <p>Home</p>
  32.     `;
  33.     initData() {
  34.         return {};
  35.     }
  36.     route() {}
  37.     attached() {}
  38. }

总结

使用 san-router 构建一个单页应用后台系统的关键点在路由配置、根组件和逻辑子组件三个方面，如果能优雅地做好以上三个方面，就能在后期开发与扩展过程中复用组件和模块，提高开发效率。另外，单页应用基于前端路由、组件化思想和前端数据流方案。因此，在构建一个单页应用系统时，还需关注前端数据流管理，对于业务比较复杂多变的后台管理系统，复用组件、有效管理 Ajax 请求和前端数据流有利于提高开发和维护效率。所以单页应用在实践中也被广泛应用，但是每种技术方案有其局限性，单页应用要在一个页面上提供所有功能，首次需要加载大量资源，资源加载时间也相对较长，在选择技术方案时还需要兼顾具体应用场景。

示例

See the Pen san-router-spa by sqliang (@sqliang) on CodePen.