如何使用 Dart 路由 API答案

【问题标题】：How to Use Dart Route API如何使用 Dart 路由 API
【发布时间】：2013-12-15 09:25:16
【问题描述】：

我创建了一个示例应用程序来测试Dart Route API。我有以下代码：

urls.dart

library urls;

import 'package:route/url_pattern.dart';

final homeUrl = new UrlPattern(r'/');
final otherScreenUrl = new UrlPattern(r'/other_screen/');

main.html

<!DOCTYPE html>

<html>
  <head>
    <meta charset="utf-8">
    <title>Test</title>
  </head>
  <body>
    <div id="sample_container_id">
      <p id="sample_text_id"></p>
    </div>

    <script type="application/dart" src="main.dart"></script>
    <script src="packages/browser/dart.js"></script>
  </body>
</html>

main.dart

import 'dart:html';
import 'package:route/client.dart';

import 'urls.dart';

void main() {
  var router = new Router()
    ..addHandler(homeUrl, _showHome)
    ..addHandler(otherScreenUrl, _showOtherScreen)
    ..listen();

  querySelector("#sample_text_id")
    ..text = "Click me!"
    ..onClick.listen(_gotoOtherScreen);
}

_gotoOtherScreen(MouseEvent event) {
  // I am trying to navigate to the "other screen" by using history.pushState here
  window.history.pushState({'url' : otherScreenUrl}, "other screen", otherScreenUrl);
}

_showHome(String path) {
  querySelector("#other_element")
    ..remove();
}

_showOtherScreen(String path) {
  querySelector("#sample_container_id")
    ..append(new SpanElement()
      ..innerHtml = "now in other screen"
      ..id = "other_element");
}

在运行应用程序然后单击<p> 标签时出现以下错误：

异常中断：非法参数：未找到处理程序 /test/web/main.html

异常：非法参数：未找到处理程序 /test/web/main.html Router._getUrl (package:route/client.dart:53:7) Router.handle (package:route/client.dart:71:22)
路由器。听。 (package:route/client.dart:102:15)

打破异常：类型“UrlPattern”不是类型的子类型 'url'的'字符串'。

例外：“UrlPattern”类型不是“String”类型的子类型 '网址'。 _gotoOtherScreen (http://127.0.0.1:3030/test/web/main.dart:18:27)

Route API 应该如何使用？我做错了什么？

【问题讨论】：

标签： dart html5-history

【解决方案1】：

以下是解决上述问题的更新代码：

urls.dart

library urls;

import 'package:route/url_pattern.dart';

final homeUrl = new UrlPattern(r'(.*)/');
final homeUrlWithFile = new UrlPattern(r'(.*)/main.html');
final otherScreenUrl = new UrlPattern(r'(.*)/other_screen');

main.html

<!DOCTYPE html>

<html>
  <head>
    <meta charset="utf-8">
    <title>Test</title>
  </head>
  <body>
    <div id="sample_container_id">
      <a href="/other_screen">click me!!</a>
    </div>

    <script type="application/dart" src="main.dart"></script>
    <script src="packages/browser/dart.js"></script>
  </body>
</html>

main.dart

import 'dart:html';
import 'package:route/client.dart';

import 'urls.dart';


void main() {
  var router = new Router()
    ..addHandler(homeUrl, _showHome)
    ..addHandler(homeUrlWithFile, _showHome)
    ..addHandler(otherScreenUrl, _showOtherScreen)
    ..listen();
}

_showHome(String path) {
  var e = querySelector("#other_element");
  if (e != null) e.remove();
}

_showOtherScreen(String path) {
  querySelector("#sample_container_id")
    ..append(new SpanElement()
      ..innerHtml = "now in other screen"
      ..id = "other_element");
}

【讨论】：