果在Vue.js 2中在本地開發環境下正常運行，但在生產環境下使用?this.$router.push({ name: 'login' })??不起作用，可能有幾個原因需要檢查和解決：

1. 路由配置問題： 確保你的路由配置正確，特別是確保在生產環境中，路由的配置和本地開發環境一致。檢查是否正確設置了name為'login'的路由。

// 示例路由配置
const routes=[
  {
    path: '/login',
    name: 'login',
    component: LoginComponent,
  },
  // 其他路由配置...
];

1. 路由模式問題： Vue Router 默認使用哈希模式（mode: 'hash'），但在生產環境中，你可能想要使用歷史模式（mode: 'history'）。確保在生產環境下也設置了相同的路由模式。

// 路由配置中設置 mode
const router=new VueRouter({
  mode: 'history',
  routes,
});

1. 路由實例問題： 確保在你調用this.$router.push({ name: 'login' })之前，this.$router是一個有效的路由實例。你可以在控制臺中輸出this.$router，確保它不是undefined或null。
2. 路由守衛問題： 如果有使用路由守衛（如beforeEach），確保它們沒有阻止或重定向到其他地方，導致this.$router.push({ name: 'login' })無法正常執行。
3. Webpack 配置問題： 如果你使用了Webpack等構建工具，確保在生產環境中的構建配置中沒有引起問題的地方，例如資源路徑的配置等。
4. 瀏覽器緩存問題： 有時瀏覽器可能會緩存舊的 JavaScript 文件。嘗試清除瀏覽器緩存或使用不同的瀏覽器進行測試。

在檢查和解決以上可能的問題之后，你應該能夠在生產環境中成功執行??this.$router.push({ name: 'login' })??。如果問題仍然存在，請檢查瀏覽器的開發者工具（控制臺、網絡面板等），查看是否有任何錯誤消息。

篇，你可以學到Ember頁面的創建，并且在不同的頁面之間跳轉。新建兩個頁面，一個是創建about頁面，一個是創建contact頁面。

看完本篇你將學到如下知識點：

• 定義路由
• 使用路由模板
• 自定義路由URL
• 使用<LinkTo>組件在不同模板之間跳轉
• 組件之間傳遞參數、屬性

定義路由

在前一篇，我們定義了一個index.hbs首頁，接著繼續在templates下面創建新的頁面。

首先通過Ember CLI創建一個路由，

ember g route about

本機創建日志：

ubuntuvim at ubuntuvim-mbp.local in [~/code/super-rentals]  on git:master ?  9b5a1ac "Initial Commit from Ember CLI v3.18.0"

23:22:20 ? ember g route about

installing route

  create app/routes/about.js

  create app/templates/about.hbs

updating router

  add route about

installing route-test

  create tests/unit/routes/about-test.js

題外話：

ubuntuvim at ubuntuvim-mbp.local in [~/code/super-rentals] on git:master ? 9b5a1ac "Initial Commit from Ember CLI v3.18.0"

23:22:20 ?

這一段是我本機命令行自動前綴，如果你的命令行安裝過zsh這個工具，就會很熟悉，zsh是一個非常強大而且漂亮的命令行工具。

打開router.js，可以看到自動創建了一個路由this.route('about');

使用路由模板

修改about路由模板文件app/templates/about.hbs，在文件內添加一下HTML內容。

{{!-- app/templates/about.hbs --}}

<div class="jumbo">
  <div class="right tomster"></div>
  <h2>About Super Rentals</h2>
  <p>
    The Super Rentals website is a delightful project created to explore Ember.
    By building a property rental site, we can simultaneously imagine traveling
    AND building Ember applications.
  </p>
</div>

瀏覽器訪問驗證：http://localhost:4200/about。可以看到about頁面的內容

使用同樣的方式創建contact路由。

ubuntuvim at ubuntuvim-mbp.local in [~/code/super-rentals]  on git:master ?  9b5a1ac "Initial Commit from Ember CLI v3.18.0"

23:22:37 ? ember g route contact

installing route

  create app/routes/contact.js

  create app/templates/contact.hbs

updating router

  add route contact

installing route-test

  create tests/unit/routes/contact-test.js

在contact.hbs添加一些HTML內容。

{{!-- app/templates/contact.hbs --}}
<div class="jumbo">
  <div class="right tomster"></div>
  <h2>Contact Us</h2>
  <p>
    Super Rentals Representatives would love to help you<br>
    choose a destination or answer any questions you may have.
  </p>
  <address>
    Super Rentals HQ
    <p>
      1212 Test Address Avenue<br>
      Testington, OR 97233
    </p>
    <a href="tel:503.555.1212">+1 (503) 555-1212</a><br>
    <a href="mailto:superrentalsrep@emberjs.com">superrentalsrep@emberjs.com</a>
  </address>
</div>

瀏覽器訪問驗證：http://localhost:4200/contact。可以看到contact頁面的內容

自定義路由URL

前面已經定義了兩個頁面，一個是about一個是contact。默認情況下訪問的路徑都是和路由同名的，另外Ember提供了非常靈活的擴展，你可以自定義的路由的訪問路徑，比如下面的代碼，把contact路由的訪問路徑改為getting-in-touch，手動修改router.js文件。

Router.map(function() {
  this.route('about');
  this.route('contact', { path: '/getting-in-touch' });
});

注意看第三行，使用path屬性指定這個路由的訪問路徑為getting-in-touch。

現在你在訪問http://localhost:4200/contact就會發現報錯了，提示找不到這個路由了。

再訪問http://localhost:4200/getting-in-touch。可以看到頁面的內容就是之前contact的內容。

使用<LinkTo>組件在不同模板之間跳轉

<LinkTo>是Ember提供好的組件，用于在不同模板之間跳轉，其作用類似于HTML標簽中的<a>標簽。

為何不直接用<a>標簽而是要自定義一個跳轉的組件呢？？因為使用普通的<a>標簽，當你點擊鏈接的時候會發送瀏覽器的刷新，但是Ember是單頁應用不需要刷新整個頁面，只要是實現頁面的跳轉即可（所謂的跳轉其實就是實現不同的路由之間的切換，并且不會刷新頁面）。

繼續改造前面的創建的index,about和contact。分別在這兩個模板頁面中添加一個跳轉的鏈接。

{{!-- index.hbs是 "/" 這個路徑默認的頁面。 --}}

<div class="jumbo">
  <div class="right tomster"></div>
  <h2>Welcome to Super Rentals!</h2>
  <p>We hope you find exactly what you're looking for in a place to stay.</p>
  
  {{!-- 使用LinkTo組件添加一個跳轉按鈕，并且指定調整到的路由是about，也就是說當用戶點擊這按鈕的時候會跳轉到about這個子頁面上 --}}
  <LinkTo @route="about" class="button">About Us</LinkTo>
  

  
  <a href="/about" class="button">About Us With A Tag</a>
</div>

點擊“About Us”這個按鈕，然后看瀏覽器的地址欄，可以看到自動轉到about這個路由下，并且頁面不會刷新。為了驗證前面所說的效果，我在About Us后面添加了一個<a>標簽按鈕，當你點擊這個鏈接的時候會看到瀏覽器自動刷新了，并且也跳轉到about頁面上。

繼續改造about和contact，分別添加跳轉按鈕。

{{!-- app/templates/about.hbs --}}
<div class="jumbo">
  <div class="right tomster"></div>
  <h2>About Super Rentals</h2>
  <p>
    The Super Rentals website is a delightful project created to explore Ember.
    By building a property rental site, we can simultaneously imagine traveling
    AND building Ember applications.
  </p>
  
  <LinkTo @route="contact" class="button">Contact Us</LinkTo>
  {{!-- 增加一個跳轉回到首頁的鏈接 --}}
  <LinkTo @route="index" class="button">Index</LinkTo>
</div>

{{!-- app/templates/contact.hbs --}}
<div class="jumbo">
  <div class="right tomster"></div>
  <h2>Contact Us</h2>
  <p>
    Super Rentals Representatives would love to help you<br>
    choose a destination or answer any questions you may have.
  </p>
  <address>
    Super Rentals HQ
    <p>
      1212 Test Address Avenue<br>
      Testington, OR 97233
    </p>
    <a href="tel:503.555.1212">+1 (503) 555-1212</a><br>
    <a href="mailto:superrentalsrep@emberjs.com">superrentalsrep@emberjs.com</a>
  </address>
  
  <LinkTo @route="about" class="button">About</LinkTo>
  {{!-- 增加一個跳轉回到首頁的鏈接 --}}
  <LinkTo @route="index" class="button">Index</LinkTo>
</div>

在about和contact兩個頁面添加了兩個跳轉按鈕，一個是about和contact頁面的相互跳轉，一個是跳轉回首頁的按鈕。

通過前面的這三個頁面，相信你很容易就可以掌握<LinkTo>組件的使用。其中@route屬性指定的是你定義的路由名字，這個路由的名字要和router.js里面的定義的完全一致，否則會找不到。另外需要注意的是@route屬性的值一定是路由的名字而不是URL的名字，比如contact路由，這個路由的路由名是contact而不是訪問的getting-in-touch。

另外在<LinkTo>組件上可以使用普通的HTML屬性，比如上面使用的class屬性，這個class屬性就是普通HTML屬性，用于指定CSS樣式的。在Ember應用中，通過@符號區別是普通的HTML屬性還是Ember提供的屬性，比如上面使用的@route就是Ember提供的屬性。

在底層，<LinkTo>組件會為我們生成一個常規的<a>標簽，并帶有針對特定路由的href。通過Ember生成的這個<a>標簽對于用戶來說非常友好，無需頁面刷新就可以實現跳轉。 簡單講，當單擊這些特殊鏈接之一時，Ember將攔截該單擊，呈現新頁面的內容，并更新URL（所有這些操作均在本地執行，而無需等待服務器），從而避免刷新整個頁面。