Iron.Router 完全指南：Meteor 应用的路由解决方案-优快云博客

本文链接：https://blog.youkuaiyun.com/gitblog_00402/article/details/148916983

Iron.Router 完全指南：Meteor 应用的路由解决方案

iron-router A client and server side router designed specifically for Meteor. 项目地址: https://gitcode.com/gh_mirrors/ir/iron-router

前言

在现代 Web 应用开发中，路由系统是连接用户界面与业务逻辑的重要桥梁。Iron.Router 作为 Meteor 生态中的路由解决方案，提供了强大而灵活的路由功能，支持客户端和服务器端路由的统一管理。本文将全面介绍 Iron.Router 的核心概念和使用方法。

快速入门

安装与更新

首先需要将 Iron.Router 添加到项目中：

meteor add iron:router

更新到最新版本：

meteor update iron:router

基本路由定义

创建一个简单的客户端路由：

Router.route('/', function () {
  this.render('Home');
});

当用户访问根路径时，会自动渲染名为 "Home" 的模板。

核心概念

路由类型

Iron.Router 支持三种路由模式：

纯服务器路由：处理 HTTP 请求，适合 REST API 端点
纯客户端路由：提供单页应用体验，无需页面刷新
混合路由：同时在客户端和服务器端运行

响应式特性

路由函数和钩子运行在响应式计算中，当依赖的响应式数据源变化时会自动重新运行。例如：

Router.route('/profile', function () {
  // 当用户状态变化时自动更新
  if (!Meteor.user()) {
    this.redirect('/login');
  }
});

路由参数详解

基本参数

使用冒号语法定义路由参数：

Router.route('/post/:_id', function () {
  const postId = this.params._id;
  // 处理postId...
});

多级参数

支持多级参数嵌套：

Router.route('/category/:categoryId/post/:_id', function () {
  const { categoryId, _id } = this.params;
  // 处理参数...
});

查询字符串和哈希片段

// 访问 /search?q=term#results
Router.route('/search', function () {
  const query = this.params.query.q; // "term"
  const hash = this.params.hash; // "results"
});

模板渲染系统

基本渲染

Router.route('/about', function () {
  this.render('AboutPage');
});

数据上下文

Router.route('/post/:_id', function () {
  this.render('PostDetail', {
    data: function() {
      return Posts.findOne(this.params._id);
    }
  });
});

布局系统

布局模板定义

<template name="MainLayout">
  <header>{{> yield "header"}}</header>
  <main>{{> yield}}</main>
  <footer>{{> yield "footer"}}</footer>
</template>

区域渲染

Router.route('/dashboard', function () {
  this.layout('MainLayout');
  this.render('DashboardHeader', {to: 'header'});
  this.render('DashboardContent');
  this.render('DashboardFooter', {to: 'footer'});
});

客户端导航

编程式导航

// 使用路径
Router.go('/products');

// 使用命名路由
Router.go('product.detail', {id: 123});

重定向

Router.route('/old-path', function() {
  this.redirect('/new-path');
});

高级特性

订阅管理

Router.route('/posts', {
  waitOn: function() {
    return Meteor.subscribe('posts');
  }
});

服务器路由

Router.route('/api/data', {where: 'server'})
  .get(function() {
    this.response.end('GET data');
  })
  .post(function() {
    this.response.end('POST data');
  });

钩子函数

Router.onBeforeAction(function() {
  if (!Meteor.user()) {
    this.redirect('login');
  }
}, {except: ['login', 'register']});

最佳实践

命名路由：始终为路由命名，便于维护和引用
路由分组：使用控制器组织相关路由
错误处理：实现404和错误处理路由
安全考虑：服务器路由需要适当的安全检查

常见问题解答

Q：如何实现路由级别的权限控制？

A：使用 onBeforeAction 钩子：

Router.onBeforeAction(function() {
  if (!Roles.userIsInRole(Meteor.userId(), ['admin'])) {
    this.redirect('unauthorized');
  }
}, {only: ['admin']});

Q：如何处理大型应用的路由配置？

A：考虑按功能模块拆分路由文件，并使用 Router.configure 统一管理全局设置。