路由

by vivid 4. 九月 2019 07:13

.NET Magazine國際中文電子雜誌
作 者:許薰尹
審 稿:張智凱
文章編號:
N190921101
出刊日期:2019/9/4

Vue預設不含路由的功能,官網文件上說明,對於大部分的單頁應用程式(Single Page Applications)而言,推荐使用官方支援的「vue-router」程式庫,參考網站在:「https://github.com/vuejs/vue-router」。「vue-router」程式庫支援的功能包含:

  • 巢狀式路由/檢視對應(View mapping)
  • 模組化,以組件為基礎的路由組態。
  • 路由參數、查詢以及萬用字元的支援。
  • 檢視過場動畫特效。
  • 導覽控制。
  • 支援HTML 5 History API或hash模式。

除了使用官方建議的「vue-router」 程式庫之外,還有第三協力廠商開發的程式庫可以供你選擇,例如「page.js參考網址:「https://visionmedia.github.io/page.js/」、或「Director(參考網址:「https://github.com/flatiron/director」)」等等。

要在網頁之中使用官方建議的「vue-router」 程式庫,可以在程式中直接引用CDN網址:「https://unpkg.com/vue-router@3.0.1/dist/vue-router.js」。或者利用Yarn將程式庫下載到本機,利用以下指令:

yarn add vue-router

還有一個選擇,使用NPM工具來下載,利用以下指令:

npm install vue-router --save

以下是一個使用「vue-router」的範例:

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title> Document </title>
</head>

<body>
  <div id="app">
    <h1> Router Demo </h1>
    <ul>
      <li>
        <router-link to="/"> Home </router-link>
      </li>
      <li>
        <router-link to="/Contact"> Contact </router-link>
      </li>
      <li>
        <router-link to="/About"> About </router-link>
      </li>
    </ul>
    <router-view></router-view>
  </div>
  </div>
  <script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js"></script>
  <script src="https://unpkg.com/vue-router@3.0.1/dist/vue-router.js"></script>
  <script>
    const Contact = { template: '<div><h1> Contact </h1> <div>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Possimus a commodi nisi. Dolore consequuntur ducimus, fugiat itaque sint saepe nobis.</div></div>' }
    const About = { template: '<div><h1> About </h1> <div>Possimus a commodi nisi.</div></div>' }

    const routes = [
      { path: '/Contact', component: Contact },
      { path: '/About', component: About }
    ];
    const router = new VueRouter({
      routes: routes
    });
    var vm = new Vue({
      el: '#app',
      router
    });
  </script>
</body>

</html>

 

為了要使用「vue-router」,範例中利用<script>標籤引用了外部CDN上的「vue-router.js」檔案,引用的順序很重要,需要在引用「vue.js」檔案之後再引用「vue-router」:

<script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js"></script>

<script src="https://unpkg.com/vue-router@3.0.1/dist/vue-router.js"></script>

接著利用<router-link>組件(Component)來定義路由超連結,我們在範例中定義了三個連結,分別用來連結到「/」、「/Contact」與「/About」路徑。網頁在執行後<router-link>組件將會轉換成HTML的<a>標籤,其中的「to」將會轉換成<a>標籤的「href」attribute,而「to」的值可以是一個字串或者是「location」物件:

<ul>
      <li>
        <router-link to="/"> Home </router-link>
      </li>
      <li>
        <router-link to="/Contact"> Contact </router-link>
      </li>
      <li>
        <router-link to="/About"> About </router-link>
      </li>
    </ul>

 

而< router-view>則是一個定位點,未來符合路由規則的組件(Component)標籤,將會插入這個標籤所在的位置:

<router-view></router-view>

在程式區塊之中,我們定義「Contact」與「About」兩個組件(Component),使用「template」屬性設定組件的UI介面:

const Contact = { template: '<div><h1> Contact </h1> <div>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Possimus a commodi nisi. Dolore consequuntur ducimus, fugiat itaque sint saepe nobis.</div></div>' }

const About = { template: '<div><h1> About </h1> <div>Possimus a commodi nisi.</div></div>' }

另外範例程式中,定義了一個名為「routes」的陣列,存放所有路由資料,每一個路由建立一個物件「{}」來描述,物件中需要指定「path」與「component」兩個屬性。「path」屬性設定的值,要對應到<router-link>的「to」;而「component」屬性設定的值,就對應到組件:

const routes = [

{ path: '/Contact', component: Contact },

{ path: '/About', component: About }

];

再來我們建立「VueRouter」實體,並指定「routes」屬性:

const router = new VueRouter({

routes: routes

});

最後我們將「VueRouter」實體指派給「Vue」實體:

var vm = new Vue({

el: '#app',

router

});

這個範例程式的執行結果參考如下,從瀏覽器的除錯視窗進行檢視,<router-link>標籤將會在執行後自動轉換成<a>標籤:

clip_image002

圖 1:使用路由。

當你點選畫面中的「Contact」連結,將顯示以下執行結果:

clip_image004

圖 2:透過連結顯示Contact組件的內容。

當你點選畫面中的「About」連結,將顯示以下執行結果:

clip_image006

圖 3:透過連結顯示About組件的內容。

設定連結樣式

根據圖1的除錯訊息,我們可以觀察到<router-link>產生出的<a>連結自動套用了「router-link-exact-active」與「 router-link-active」兩個CSS樣式:

<a href="#/" class="router-link-exact-active router-link-active"> Home </a>

我們可以為其加上自訂樣式,例如修改上個範例的程式碼,在<head>標籤之中加入以下<style>區塊,定義CSS樣式程式碼,自訂連結樣式:

<style>

ul li :hover,

ul li a.router-link-exact-active {

background-color: lightblue;

cursor: pointer;

}

</style>

加上自訂樣式之後,在網頁執行時,當滑鼠移動到連結上方,或點選超連結,超連結就會套用淡藍色背景顏色,請參考下圖所示:

clip_image008

圖 4:自訂CSS樣式。

預設路由會根據模糊比對路徑原則來套用「router-link-active」自訂CSS類別;根據嚴格比對路徑原則來套用「router-link-exact-active」自訂CSS類別,為了區別「router-link-active」、「router-link-exact-active」兩者的差異,我們先將樣式修改如下:

<style>

ul li :hover,

ul li a.router-link-active {

background-color: lightblue;

cursor: pointer;

}

</style>

接著執行網頁,當目前的路徑為「#/About」時:

http://127.0.0.1:5500/demo1.html#/About

由於「About」連結的「href」 Attribute完全相符於路徑,因此便套用「router-link-active」樣式,而 「Home」連結因為「href」 Attribute包含「#/」,根據模糊比對也會套用該樣式,導至不想要的執行效果,讓兩個連結都套用「router-link-active」樣式,這個範例程式的執行結果參考如下:

clip_image010

圖 5:自訂樣式套用。

定義router-link參數

有時後,在網址後頭會附加查詢字串,用來傳遞資料到其它網頁。查詢字串是以「?」號開頭的字串,語法為「?key=value」,若有多組資料需要傳遞,則可使用「&」符號做為區隔,語法為「?key1=value1&key2=value2」。在<router-link>之中,若要產生查詢字串,可以設定「to」的值是為一個「location」物件,然後設定「query」屬性,例如,讓我們修改上個範例產生「Contact」超連結的<router-link>標籤的設定如下:

<router-link v-bind:to="{path:'/Contact', query :{ memberName : 'Mary' }}"> Contact </router-link>

當網頁執行時,若點選連結,URL路徑便會產生查詢字串「memberName=Mary」:

http://127.0.0.1:5500/demo1.html#/Contact?memberName=Mary

這個範例程式的執行結果參考如下:

clip_image012

圖 6:設定查詢字串。

常用屬性「props」

<router-link>包含一些屬性可以進一步控制產生出的連結做進一步的設定。分述如下:

  • 「replace」屬性

若在<router-link>上加上「replace」attribute則表示點選此連結之後,不會將之加到歷史紀錄。語法參考如下:

<router-link to="/About" replace> About </router-link>

  • 「append」屬性

「append」屬性用於附加相對路徑到目前的路徑,例如若目前有一個<router-link>定義如下,連結到「About」頁面,而<router-link>的路徑使用「{path:'About'}」,而不是「{path:'/About'}」,沒有「/」符號,並且附加了「append」關鍵字:

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title> Document </title>
  <style>
    ul li :hover,
    ul li a.router-link-exact-active {
      background-color: lightblue;
      cursor: pointer;
    }
  </style>
</head>

<body>
  <div id="app">
    <h1> Router Demo </h1>
    <ul>
      <li>
        <router-link to="/"> Home </router-link>
      </li>
      <li>
        <router-link v-bind:to="{path:'/Contact', query :{ memberName : 'Mary' }}"> Contact </router-link>
      </li>
      <li>
        <router-link v-bind:to="{path:'About'}" append> About </router-link>
        <!-- or -->
        <!-- <router-link to="About" append> About </router-link> -->
      </li>
    </ul>
    <router-view></router-view>
  </div>
  </div>
  <script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js"></script>
  <script src="https://unpkg.com/vue-router@3.0.1/dist/vue-router.js"></script>
  <script>
    const Contact = { template: '<div><h1> Contact </h1> <div>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Possimus a commodi nisi. Dolore consequuntur ducimus, fugiat itaque sint saepe nobis.</div></div>' }
    const About = { template: '<div><h1> About </h1> <div>Possimus a commodi nisi.</div></div>' }

    const routes = [
      { path: '/Contact', component: Contact },
      { path: '/About', component: About }
    ];
    const router = new VueRouter({
      routes: routes
    });
    var vm = new Vue({
      el: '#app',
      router,
      data: { }
    });
  </script>
</body>

</html>

 

當此網頁執行時,若先點選「Contact」連結,再點選「About」連結,則Url上的路徑會是「/Contact/About」,而不是「/About」,執行的結果如下圖所示:

clip_image014

圖 7:使用「append」屬性。

  • 「tag」屬性

預設<router-link>會產生<a>標籤,我們可以利用「tag」屬性來要求<router-link>產生你所指定的標籤,例如修改上例的程式如下,指定要使用「div」來呈現:

<ul>
      <li>
        <router-link to="/" tag="div"> Home </router-link>
      </li>
      <li>
        <router-link v-bind:to="{path:'/Contact', query :{ memberName : 'Mary' }}" tag="div"> Contact </router-link>
      </li>
      <li>
        <router-link v-bind:to="{path:'About'}" tag="div"> About </router-link>
      </li>
    </ul>

 

當網頁執行時,從瀏覽器的除錯視窗檢視執行的結果如下,雖然使用的是<div>標籤,但點選連結依然有效果,會載入適當的組件來顯示:

clip_image016

圖 8:自訂導覽用的標籤。

  • 「event」屬性

預設網頁執行時,要點選超連結,觸發「click」事件,才會顯示對應的組件,利用「event」屬性可以變更繫結的事件,參考下例,<router-link>標籤加上「event」屬性,將事件改為「mouseenter」,只要滑鼠移動到連結的上方,對應的組件就會自動顯示。

<ul>
      <li>
        <router-link to="/" event="mouseenter"> Home </router-link>
      </li>
      <li>
        <router-link v-bind:to="{path:'/Contact', query :{ memberName : 'Mary' }}" event="mouseenter"> Contact </router-link>
      </li>
      <li>
        <router-link v-bind:to="{path:'About'}" event="mouseenter"> About </router-link>
      </li>
    </ul>

Tags:

.NET Magazine國際中文電子雜誌 | JavaScript

新增評論




  Country flag
biuquote
  • 評論
  • 線上預覽
Loading






NET Magazine國際中文電子雜誌

NET Magazine國際中文電子版雜誌,由恆逸資訊創立於2000,自發刊日起迄今已發行超過500篇.NET相關技術文章,擁有超過40000名註冊讀者群。NET Magazine國際中文電子版雜誌希望藉於電子雜誌與NET Developer達到共同學習與技術新知分享,歡迎每一位對.NET 技術有興趣的朋友們多多支持本雜誌,讓作者群們可以有持續性的動力繼續爬文。<請加入免費訂閱>

月分類Month List