director.js 路由-CFANZ编程社区

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>director.js</title>
    <style type="text/css">
    .test {width: 100px;height: 100px;}
    span {cursor: pointer;}
    </style>
  </head>

  <body>
    <ul>
      <li><a href="#/author">#/author</a></li>
      <li><a href="#/books">#/books</a></li>
      <li><span href="#/books/view/1_1">#/books/view/1</span></li>
      <li><span href="#/books/view/2_2">#/books/view/2</span></li>
      <li><span href="#/books/view/3_3">#/books/view/3</span></li>
      <li><a href="https://www.baidu.com/?tn=47018152_dg">百度</a></li>
      <div class="test"></div>
    </ul>

    <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.js"></script>
    <script src="https://cdn.bootcss.com/Director/1.2.8/director.js"></script>
    <script>
      var author = function () {
          //console.log("author");
          $('.test').css({background:'green'});
          };
      var books = function () {
          //console.log("books");
          $('.test').css({background:'pink'});
      };
      var viewBook = function (bookId) {
        //console.log("viewBook: bookId is populated: " + bookId);
        var id = bookId.split('_')[0];
        var tid = bookId.split('_')[1];
        if (id == 1) {
            $('.test').css({background:'gold'});
            console.log(tid);
        } else if  (id == 2) {
            $('.test').css({background:'#dddddd'});
            console.log(tid);
        } else if (id == 3) {
            $('.test').css({background:'blue'});
            console.log(tid);
        }
      };

      $('span').on('click', function() {
          var temp = location.href.split('#')[0];
          location.href = temp + $(this).attr('href');
      });

      var routes = {
        '/author': author,
        '/books': [books, function() {
          console.log("An inline route handler.");
        }],
        '/books/view/:bookId': viewBook
      };
      var router = Router(routes);
      router.init();
    </script>
  </body>
</html>

通过js控制跳转：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>A Gentle Introduction</title>
 
    <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.js"></script>
    <script src="https://cdn.bootcss.com/Director/1.2.8/director.min.js"></script> 
 
    <script>
    $('document').ready(function() {
      //
      // create some functions to be executed when
      // the correct route is issued by the user.
      //
      var showAuthorInfo = function () { console.log("showAuthorInfo"); };
      var listBooks = function () { console.log("listBooks"); };
 
      var allroutes = function() {
        var route = window.location.hash.slice(2);
        var sections = $('section');
        var section;
 
        section = sections.filter('[data-route=' + route + ']');
 
        if (section.length) {
          sections.hide(250);
          section.show(250);
        }
      };
 
      //
      // define the routing table.
      //
      var routes = {
        '/author': showAuthorInfo,
        '/books': listBooks
      };
 
      //
      // instantiate the router.
      //
      var router = Router(routes);
 
      //
      // a global configuration setting.
      //
      router.configure({
        on: allroutes
      });
 
      router.init();

      $('#m-author').on('click', function () {
        window.location = '#/author';  
      });
      $('#m-books').on('click', function () {
        window.location = '#/books';  
      });
    });
    </script> 
  </head>
 
  <body>
    <section data-route="author">Author Name</section>
    <section data-route="books">Book1, Book2, Book3</section>
    <ul>
      <li><a href="javascript:;" id="m-author">author</a></li>
      <li><a href="javascript:;" id="m-books">books</a></li>
    </ul>
  </body>
</html>