director.js 路由<!DOCTYPE html><html> <head> <meta charset

<!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="www.baidu.com/?tn=4701815…>
<div class="test"></div>
</ul>

<script src="cdn.bootcss.com/jquery/3.2.…>
<script src="cdn.bootcss.com/Director/1.…>
<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>