Ember 路由定義

2018-01-06 17:47 更新

當(dāng)你的應(yīng)用啟動的時候，路由器就會匹配當(dāng)前的URL到你定義的路由上。然后按照定義的路由層次逐個加載數(shù)據(jù)、設(shè)置應(yīng)用程序狀態(tài)、渲染路由對應(yīng)的模板。

1，基本路由

在app/router.js的map方法里定義的路由會映射到當(dāng)前的URL。當(dāng)map方法被調(diào)用的時候方法體內(nèi)的route方法就會創(chuàng)建路由。

下面使用Ember CLI命令創(chuàng)建兩個路由：

ember generate route about
ember generate route favorites

命令執(zhí)行完之后你可在你的項目目錄app/routes下面看到已經(jīng)創(chuàng)建好的兩個路由文件已經(jīng)app/templates下面路由對應(yīng)的模板文件。 此時在app/router.js的map方法中已經(jīng)存在了剛剛創(chuàng)建的路由配置。這個是Ember CLI自動為你創(chuàng)建了。

// app/router.js


import Ember from 'ember';
import config from './config/environment';


var Router = Ember.Router.extend({
  location: config.locationType
});


Router.map(function() {
  this.route('about');
  this.route('favorites');
});


export default Router;

現(xiàn)在分別修改app/templates下面的兩個模板文件如下：





這個是about模板！<br>
{{outlet}}




這個是favorites模板！<br>
{{outlet}}

然后訪問http://localhost:4200/about或者http://localhost:4200/favorites，如果你的程序沒有問題你也會得到如下顯示結(jié)果：

run result

如果你覺得favorites這個路由名字太長是否可以修改成其他名字呢？答案是肯定的，你只要修改router.js中map方法的配置即可。

Router.map(function() {
  this.route('about');
  // 注意：訪問的URL可以寫favs但是項目中如果是使用route的地方仍然是使用favorites
  this.route('favorites', { path: '/favs' });
});

此時訪問：http://localhost:4200/favs，界面顯示的結(jié)果與之前是一樣的。

說明：默認情況下訪問的URL與路由名字是一致的，比如this.route('about')與this.route('about', { path: ‘/about’ })是同一個路由，如果URL與路由不同名則需要使用{path: '/xxx'}設(shè)置映射的URL。

在handlebars模板中可以使用{{link-to}}助手在不同的路由間切換，使用時需要在link-to助手內(nèi)指定路由名稱。比如下面的代碼使用link-to助手實現(xiàn)在about和favs兩個路由間切換。 為了頁面能美觀一點引入bootstrap，使用npm命令安裝：bower install bootstrap，如果安裝成功你可以在bower_components目錄下看到bootstrap相關(guān)的文件。安裝成功之后引入到項目中，修改chapter3_routes/ember-cli-build.js。在return語句前加入如下兩行代碼(作用就是引入bootstrap框架)：

app.import("bower_components/bootstrap/dist/css/bootstrap.css");
app.import("bower_components/bootstrap/dist/js/bootstrap.js");

修改application.hbs，增加一個導(dǎo)航菜單。







    <div class="container-fluid">
            <div class="navbar-header" href="#">

                
                {{#link-to 'index' class="navbar-brand"}}Home{{/link-to}}
            </div>
            <ul class="nav navbar-nav">
                <li>{{#link-to 'about'}}about{{/link-to}}</li>
                <li>{{#link-to 'favorites'}}favorites{{/link-to}}</li>
            </ul>
            <ul class="nav navbar-nav navbar-right">
                <li><a href="#">Login</a></li>
                <li><a href="#">Logout</a></li>
            </ul>
    </div>




<div class="container-fluid" style="margin-top: 70px;">


{{outlet}}
</div>

如果看到頁面沒有bootstrap效果請重新啟動項目。如果運行項目后再瀏覽器控制臺出現(xiàn)如下錯誤。

run result

如果出現(xiàn)上圖錯誤需要在config/environment.js中加上一些安全策略設(shè)置代碼，有關(guān)設(shè)置的解釋請看下面網(wǎng)址的文章介紹。

  1. ember-cli-and-content-security-policy-cs
  2. https://www.w3.org/TR/2015/CR-CSP2-20150721/ 
    , contentSecurityPolicy: {
  'default-src': "'none'",
  'script-src': "'self' 'unsafe-inline' 'unsafe-eval' use.typekit.net connect.facebook.net maps.googleapis.com maps.gstatic.com",
  'font-src': "'self' data: use.typekit.net",
  'connect-src': "'self'",
  'img-src': "'self' www.facebook.com p.typekit.net",
  'style-src': "'self' 'unsafe-inline' use.typekit.net",
  'frame-src': "s-static.ak.facebook.com static.ak.facebook.com www.facebook.com"
}

配置截圖

上圖是我的演示項目配置。然后點擊about會得到如下界面

result

可以看到瀏覽器地址欄的URL變?yōu)?code>about了，并且頁面顯示的內(nèi)容也是about模板的內(nèi)容。同理你點擊favorites地址欄就變?yōu)?a href="http://localhost:4200/favs" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" >http://localhost:4200/favs并且顯示的內(nèi)容是favorites的（為什么URL是favs而不是favorites呢，因為前面已經(jīng)修改了route和URL的映射關(guān)系，路由favorites對應(yīng)的URL是favs）。 上述演示的就是路由的切換?。?！

可以看到瀏覽器地址欄的URL變?yōu)閍bout了，并且頁面顯示的內(nèi)容也是about模板的內(nèi)容。同理你點擊“favorites”地址欄就變?yōu)閔ttp://localhost:4200/favs并且顯示的內(nèi)容是favorites的（為什么URL是favs而不是favorites呢，因為前面已經(jīng)修改了route和URL的映射關(guān)系，路由favorites對應(yīng)的URL是favs）。 上述演示的就是路由的切換?。?！

2，路由嵌套

還記得在前面的Ember.js 入門指南之十三{{link-to}} 助手這篇文章的內(nèi)容嗎？在這篇文章中比較詳細的介紹了路由的嵌套與怎么使用嵌套的路由。不妨回過頭去看看。在這里打算就不講了……如果有不明白的請看官網(wǎng)的教程。

3，application路由

application路由是默認的路由，是程序的入口，所有其他自定義的路由都先進過application才到自定義的路由。并且application路由對應(yīng)的application.hbs模板是所有自定義模板的父模板，所有自定義的模板都會渲染到application.hbs模板的{{outlet}}上。有關(guān)于路由的執(zhí)行順序以及模板的渲染順序在前面的Ember.js 入門指南之十三{{link-to}} 助手也講過了，在此也不打算在做過多的介紹了。你可以回頭看之前的文章或者到官網(wǎng)查看。

4，index路由

對于所有的嵌套的路由，包括最頂層的路由Ember會自動生成一個訪問URL為/對應(yīng)路由名稱為index的路由。

比如下面的兩種路由設(shè)置是等價的。

//  app/router.js
// ……


Router.map(function() {
    this.route('about');
    // 注意：訪問的URL可以寫favs但是項目中如果是使用route的地方仍然是使用favorites
    this.route('favorites', { path: '/favs' });
});


export default Router;

//  app/router.js
// ……


Router.map(function() {
    this.route('index', { path: '/' });
    this.route('about');
    // 注意：訪問的URL可以寫favs但是項目中如果是使用route的地方仍然是使用favorites
    this.route('favorites', { path: '/favs' });
});


export default Router;

index路由會渲染到application.hbs模板的{{outlet}}上。這個是Ember默認設(shè)置。當(dāng)用戶訪問/about時Ember會把index模板替換為about模板。

對于路由嵌套的情況也是如此。

//  app/router.js
//  ……
Router.map(function() {


    this.route('posts', function() {
        this.route('new');
    });


});


export default Router;
//  app/router.js


//  ……
Router.map(function() {
    this.route('index', { path: '/' });
    this.route('posts', function() {
        this.route('index', { path: '/' });
        this.route('new');
    });


});


export default Router;

兩種設(shè)置方式都會得到如下圖的路由表。打開瀏覽器的“開發(fā)者工具”點開“Ember”選項卡，在點開“/#Routes”你就可以看到如下路由表（顯示是順序有可能跟你的不一樣）。

路由渲染結(jié)果

注：loading和error這兩個路由是ember自動生成的，他們的用法會在后面的文章介紹。

當(dāng)用戶訪問/posts時實際進入的路由是posts.index對應(yīng)的模板是posts/index.hbs，但是實際中我并沒有創(chuàng)建這個模板，因為Ember默認把這個模板渲染到posts.hbs的{{outlet}}上。由于這個模板不存在也就相當(dāng)于什么都沒做。當(dāng)然你也可以創(chuàng)建這個模板。
使用命令：ember generate template posts/index然后在這個模板中添加以下顯示的內(nèi)容：





<h2>這里是/posts/index.hbs。。。</h2>

再此訪問http://localhost:4200/posts，是不是可以看到增加的內(nèi)容了。

你可以這么理解對于每一個有子路由的路由都有一個名為index的子路由并且這個路由對應(yīng)的模板為index.hbs，如果把有子路由的路由當(dāng)做一個模塊看待那么index.hbs就是這個模塊的首頁。特別是做過一些信息系統(tǒng)的朋友應(yīng)該是很熟悉的，基本上沒個子模塊都會有一個首頁，這個首頁現(xiàn)實的內(nèi)容就是一進入這個模塊時就顯示的內(nèi)容。既然是子模板當(dāng)然也不會例外它也會渲染到父模板的{{outlet}}上。比如上面的例子當(dāng)用戶訪問http://localhost:4200/posts實際進入的是http://localhost:4200/posts/（后面多了一個/，這個/對應(yīng)的模板就是index），當(dāng)用戶訪問的是http://localhost:4200/posts/new，那么進入的就是posts/new.hbs這個模板（也是渲染到posts.hbs的{{outlet}}上）。

4，動態(tài)段

關(guān)于動態(tài)段在前面的Ember.js 入門指南之十三{{link-to}} 助手也介紹過了，在這里就再簡單補充下。

路由最主要的任務(wù)之一就是加載model。

例如對于路由this.route('posts');會加載項目中所有的posts下的model。但是當(dāng)你只想加載其中一個model的時候怎么處理呢？而且大多數(shù)情況我們是不需要一次性加載完全部數(shù)據(jù)的，一般情況都是加載其中一小部分。這個時候就需要動態(tài)段了！

動態(tài)段以:開頭，并且后面接著model的id屬性。

//  app/router.js


//  ……


Router.map(function() {
    this.route('about');
    // 注意：訪問的URL可以寫favs但是項目中如果是使用route的地方仍然是使用favorites
    // this.route('favorites', { path: '/favs' });


    this.route('posts', function() {
        this.route('post', { path: '/:post_id'});
    });

    
});


export default Router;

此時你可以訪問http://localhost:4200/posts/1，不過我們還沒創(chuàng)建model所以會報錯。這個我們暫時不管，后面會有一章是介紹model的。現(xiàn)在只要知道你訪問http://localhost:4200/posts/1就相當(dāng)于獲取id值唯一的model。

5，通配符/全局路由

Ember也同樣運行你使用*作為URL通配符。有了通配符你可以設(shè)置多個URL訪問同一個路由。

this.route('about', { path: '/*wildcard' });

然后訪問：http://localhost:4200/wildcard或者訪問http://localhost:4200/2423432ffasdfewildcard或者http://localhost:4200/2333都是可以進入到about這個路由，但是http://localhost:4200/posts仍然進入的是posts這個路由。因為可以匹配到這個路由。

6，重置子路由的命名空間

在有路由嵌套的情況下，一般情況我們訪問URL的格式都是父路由名/子路由名，Ember提供了一個resetNamespace:true選項可以用戶重置子路由的命名空間，使用這個設(shè)置的路由可以直接這樣訪問/子路由名，不需要寫父路由名。

this.route('posts', function() {
    this.route('post', { path: '/:post_id'});
    this.route('comments', { resetNamespace: true}, function() {
        this.route('new');
    });
});

此時如果你想問的new這個路由你可以直接不寫comments。http://localhost:4200/posts/new，而不需要http://localhost:4200/posts/comments/new，不過模板渲染的順序沒變，new模板仍然是渲染到comments的{{outlet}}上。

不過個人覺得還是不使用這個設(shè)置比較好，特別是在開發(fā)的時候你可以看到訪問的URL的層次，對你調(diào)試代碼還是很有幫助的。

以上的內(nèi)容就是定義路由的全部內(nèi)容。都是非常重要的知識，希望你能好好掌握，對于路由的嵌套請看之前的文章。如果有疑問請給我留言或者訪問官網(wǎng)看原教程。
博文完整代碼放在Github（博文經(jīng)過多次修改，博文上的代碼與github代碼可能又出入，不過影響不大?。?，如果你覺得博文對你有點用，請在github項目上給我點個star吧。您的肯定對我來說是最大的動力??！

以上內(nèi)容是否對您有幫助：
在線筆記
App下載
App下載

掃描二維碼

下載編程獅App

公眾號
微信公眾號

編程獅公眾號