DoneJS 高级路由技巧：实现漂亮 URL 和深度链接的完整方案

DoneJS 高级路由技巧：实现漂亮 URL 和深度链接的完整方案

【免费下载链接】donejs Your app. Done. 项目地址: https://gitcode.com/gh_mirrors/do/donejs

DoneJS 是一个功能全面的前端框架，提供了强大的路由功能，帮助开发者构建具有漂亮 URL 和深度链接的现代单页应用。本文将详细介绍如何利用 DoneJS 的路由系统实现优雅的 URL 结构和无缝的深度链接体验。

为什么选择 DoneJS 路由？

DoneJS 的路由系统基于 CanJS 的 can-route 模块，提供了双向绑定的路由功能，支持哈希路由和 pushstate 模式。与其他框架相比，DoneJS 的路由具有以下优势：

• 简洁直观：将 URL 模式映射到应用状态，而非控制器动作
• 双向绑定：路由变化自动更新应用状态，反之亦然
• 灵活强大：支持复杂的路由规则和参数处理
• SEO 友好：通过 pushstate 实现的漂亮 URL 有利于搜索引擎优化

DoneJS 路由系统与服务器渲染协同工作示意图

从哈希路由到 Pushstate：实现漂亮 URL

DoneJS 支持两种路由模式：传统的哈希路由和现代的 pushstate 路由。后者可以创建类似 myapp.com/user/1234 的漂亮 URL，而非丑陋的 myapp.com#page=user&userId=1234。

启用 Pushstate

要启用 pushstate，首先需要导入并配置 can-route-pushstate：

import RoutePushstate from 'can-route-pushstate';

然后在应用初始化时配置路由模式：

// 启用 pushstate 模式
route.urlData = new RoutePushstate();

使用 pushstate 实现的漂亮 URL 在聊天应用中的效果

定义路由规则

DoneJS 路由通过 route.register() 方法定义 URL 模式与应用状态之间的映射关系。基本语法如下：

// 基础路由
route.register("{page}", { page: "home" });

// 带参数的路由
route.register("{page}/{slug}", { slug: null });

// 多级路由
route.register("{page}/{slug}/{action}", { slug: null, action: null });

这些规则将 URL 路径片段映射到应用状态的属性。例如，URL /user/john/edit 将映射为状态 { page: 'user', slug: 'john', action: 'edit' }。

在模板中使用路由

DoneJS 提供了 routeUrl 模板助手，用于生成符合路由规则的 URL：

<a href="{{routeUrl page='user' slug=user.id}}">查看用户</a>

这将生成类似 /user/123 的 URL，具体取决于路由规则配置。

在模板中根据当前路由状态显示不同内容：

{{#switch page}}
  {{#case "home"}}
      <myapp-home></myapp-home>
  {{/case}}
  {{#case "users"}}
    {{#if(slug)}}
      <myapp-user-detail userId:bind="slug"></myapp-user-detail>
    {{else}}
      <myapp-users></myapp-users>
    {{/if}}
  {{/case}}
{{/switch}}

深度链接与状态管理

深度链接允许用户直接访问应用中的特定内容。DoneJS 路由与应用状态紧密集成，使实现深度链接变得简单。

监听路由变化

通过监听路由变化，可以在 URL 改变时执行相应的操作：

route.on("change", function(ev, newState, oldState) {
  // 处理路由变化
  console.log("路由已变更:", newState);
});

以编程方式更新路由

除了通过链接导航，还可以通过代码更新路由状态：

// 更新路由状态，将自动更新 URL
route.attr("page", "user");
route.attr("slug", "123");

路由参数验证与处理

对于复杂应用，可能需要对路由参数进行验证和处理。DoneJS 提供了灵活的方式来实现这一点：

// 自定义路由数据处理
route.data = new DefineMap({
  page: {
    type: "string",
    set: function(newVal) {
      // 验证页面名称
      const validPages = ["home", "users", "settings"];
      return validPages.includes(newVal) ? newVal : "home";
    }
  },
  slug: "string"
});

服务器配置

使用 pushstate 时，需要配置服务器以支持所有路由路径。例如，在 Node.js Express 服务器中：

app.get('*', function(req, res) {
  res.sendFile(path.join(__dirname, 'public/index.html'));
});

这确保所有请求都返回应用的入口 HTML 文件，然后由 DoneJS 路由系统处理。

实际应用示例：PlaceMyOrder 应用

在 PlaceMyOrder 示例应用中，路由配置如下：

// 基础路由
route.register("{page}", { page: "home" });
// 带参数的路由
route.register("{page}/{slug}", { slug: null });
// 动作路由
route.register("{page}/{slug}/{action}", { slug: null, action: null });

这使得应用能够处理如 /restaurants/123 和 /orders/456/edit 这样的 URL。

PlaceMyOrder 应用中的路由导航效果

总结

DoneJS 提供了强大而灵活的路由系统，使开发者能够轻松实现漂亮 URL 和深度链接。通过 pushstate 模式、路由规则定义、模板集成和状态管理，DoneJS 路由帮助构建出既用户友好又 SEO 友好的现代单页应用。

要深入了解 DoneJS 路由功能，可以参考官方文档：docs/guides/place-my-order.md 中的路由设置部分。

掌握这些高级路由技巧，将为你的 DoneJS 应用带来更专业的用户体验和更好的可维护性。

【免费下载链接】donejs Your app. Done. 项目地址: https://gitcode.com/gh_mirrors/do/donejs