BackboneJS - Router Navigate

更新于 2025/12/4 18:59:00

描述

要将应用程序保存为 URL，您需要使用 navigation 方法来更新 URL。

语法

router.navigate(fragment, options)

参数

fragment − 这是参数的名称，在此参数后将显示 url。
options − 调用路由函数并更新 URL 的选项（例如 trigger 和 replace）。

示例

<!DOCTYPE html>
<html>
   <head>
      <title>Router Example</title>
      <script src = "https://code.jquery.com/jquery-2.1.3.min.js"
         type = "text/javascript"></script>
      
      <script src = "https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.2/underscore-min.js"
         type = "text/javascript"></script>
      
      <script src = "https://cdnjs.cloudflare.com/ajax/libs/backbone.js/1.1.2/backbone-min.js"
         type = "text/javascript"></script>
   </head>
   
   <script type = "text/javascript">
   
      //'RouteMenu' 是视图类的名称
      var RouteMenu = Backbone.View.extend ({
         el: '#routemenu',   //'el' 定义使用哪个元素作为视图引用

         //定义在链接上发生的点击事件
         events: {
            'click a' : 'onClick'
         },

         //点击链接后，路由器调用“navigate”来更新 URL
         onClick: function( e ) {

            //使用navigate()方法将应用程序保存为URL
            router.navigate('/');
         }
      });
      var Router = Backbone.Router.extend ({

         //'routes' 将带有参数的 URL 映射到路由器上的函数
         routes: {
            'route/:id' : 'defaultRoute'
         },
      });

      //'routemenu'是视图类的一个实例
      var routemenu = new RouteMenu();

      //它开始监听路线并管理可收藏 URL 的历史记录
      Backbone.
      history.start();
   </script>
   
   <body>
      <p>It refers to the view class 'RouteMenu' and creates the 3 links 
      which changes the url when you click on the links</p>
      
      <section id = "routemenu">
         <ul>
            <li> <a href = "#/route/1">route 1 </a> </li>
            <li> <a href = "#/route/2">route 2 </a> </li>
            <li> <a href = "#/route/3">route 3 </a> </li>
         </ul>
      </section>
   </body>
</html>