VueJS - 路由

上一頁
下一頁

VueJS 沒有內建的路由功能。我們需要遵循一些額外的步驟來安裝它。

從 CDN 直接下載

最新版本的 vue-router 可在 https://unpkg.com/vue-router/dist/vue-router.js 獲取

Unpkg.com 提供基於 npm 的 cdn 連結。以上鍊接始終更新到最新版本。我們可以下載並託管它，並像下面這樣使用指令碼標籤與 vue.js 一起使用：

<script src = "/path/to/vue.js"></script>
<script src = "/path/to/vue-router.js"></script>

使用 NPM

執行以下命令安裝 vue-router。

npm  install vue-router

使用 GitHub

我們可以從 GitHub 克隆儲存庫，如下所示：

git clone https://github.com/vuejs/vue-router.git node_modules/vue-router
cd node_modules/vue-router
npm install
npm run build

讓我們從一個使用 vue-router.js 的簡單示例開始。

示例

<html>
   <head>
      <title>VueJs Instance</title>
      <script type = "text/javascript" src = "js/vue.js"></script>
      <script type = "text/javascript" src = "js/vue-router.js"></script>
   </head>
   <body>
      <div id = "app">
         <h1>Routing Example</h1>
         <p>
            <router-link to = "/route1">Router Link 1</router-link>
            <router-link to = "/route2">Router Link 2</router-link>
         </p>
         <!-- route outlet -->
         <!-- component matched by the route will render here -->
         <router-view></router-view>
      </div>
      <script type = "text/javascript">
         const Route1 = { template: '<div style = "border-radius:20px;background-color:cyan;width:200px;height:50px;margin:10px;font-size:25px;padding:10px;">This is router 1</div>' }
         const Route2 = { template: '<div style = "border-radius:20px;background-color:green;width:200px;height:50px;margin:10px;font-size:25px;padding:10px;">This is router 2</div>' }
         const routes = [
            { path: '/route1', component: Route1 },
            { path: '/route2', component: Route2 }
         ];
         const router = new VueRouter({
            routes // short for `routes: routes`
         });
         var vm = new Vue({
            el: '#app',
            router
         });
      </script>
   </body>
</html>

輸出

Route1 Link

Route2 Link

要開始路由，我們需要新增 vue-router.js 檔案。從 https://unpkg.com/vue-router/dist/vue-router.js 獲取程式碼並將其儲存在檔案 vue-router.js 中。

指令碼在 vue.js 之後新增，如下所示：

<script type = "text/javascript" src = "js/vue.js"></script>
<script type = "text/javascript" src = "js/vue-router.js"></script>

在 body 部分，路由連結定義如下：

<p>
   <router-link   to = "/route1">Router Link 1</router-link>
   <router-link    to = "/route2">Router Link 2</router-link>
</p>

<router-link> 是一個用於導航到要顯示給使用者的 HTML 內容的元件。to 屬性是目標，即獲取要顯示內容的原始檔。

在上面的程式碼片段中，我們建立了兩個路由連結。

看一下指令碼部分，其中初始化了路由器。建立了兩個常量，如下所示：

const  Route1 = { template: '<div style = "border-radius:20px;background-color:cyan;width:200px;height:50px;margin:10px;font-size:25px;padding:10px;">This is router 1</div>' };
const Route2 = { template: '<div style = "border-radius:20px;background-color:green;width:200px;height:50px;margin:10px;font-size:25px;padding:10px;">This is router 2</div>' }

它們有模板，當點選路由連結時需要顯示。

接下來是 routes 常量，它定義了要在 URL 中顯示的路徑。

const routes = [
   { path: '/route1', component: Route1 },
   { path: '/route2', component: Route2 }
];

路由定義路徑和元件。當用戶點選路由連結時，路徑，即/route1，將顯示在 URL 中。

元件獲取要顯示的模板名稱。路由中的路徑需要與路由連結的 to 屬性匹配。

例如，<router-link to = ”path here”></router-link>

接下來，使用以下程式碼片段建立 VueRouter 例項。

const router = new VueRouter({
   routes // short for `routes: routes`
});

VueRouter 建構函式將路由作為引數。路由物件使用以下程式碼片段分配給主 vue 例項。

var vm = new Vue({
   el: '#app',
   router
});

執行示例並在瀏覽器中檢視顯示。在檢查和檢查路由連結時，我們會發現它會向活動元素新增類，如下面的螢幕截圖所示。

Route Link

新增的類是class = “router-link-exact-active router-link-active”。活動連結獲取如上圖所示的類。需要注意的另一件事是，<router-link> 呈現為 a 標籤。

路由連結的屬性

讓我們看看要傳遞給 <router-link> 的更多屬性。

to

這是給 <router-link> 的目標路徑。當點選時，to 的值將內部傳遞給 router.push()。該值需要是字串或位置物件。使用物件時，我們需要像示例 2 中所示那樣繫結它。

e.g. 1:  <router-link to = "/route1">Router Link 1</router-link>
renders as
<a href = ”#/route”>Router Link </a>
e.g. 2:  <router-link v-bind:to = "{path:'/route1'}">Router Link 1</router-link>
e.g. 3: <router-link v-bind:to =
   "{path:'/route1', query: { name: 'Tery' }}">Router Link 1</router-link>//router link with query string.

以下是示例 3 的輸出。

Routing Example

在 URL 路徑中，name = Tery 是查詢字串的一部分。例如：https:///vueexamples/vue_router.html#/route1?name = Tery

replace

向路由連結新增 replace 將呼叫router.replace() 而不是router.push()。使用 replace，不會儲存導航歷史記錄。

示例

<router-link v-bind:to = "{path:'/route1', query: { name: 'Tery' }}"   replace>Router Link 1</router-link>

append

向 <router-link><router-link> 新增 append 將使路徑相對。

如果我們想從路徑為 /route1 的路由連結轉到路徑為 /route2 的路由連結，它將在瀏覽器中顯示路徑 /route1/route2。

示例

<router-link v-bind:to = "{ path: '/route1'}" append>Router Link 1</router-link>

tag

目前 <router-link> 呈現為 a 標籤。如果我們想將其呈現為其他標籤，我們需要使用 tag = ”tagname” 指定相同的標籤；

示例

<p>
   <router-link v-bind:to = "{ path: '/route1'}" tag = "span">Router Link 1</router-link>
   <router-link v-bind:to = "{ path: '/route2'}" tag = "span">Router Link 2</router-link>
</p>

我們已將標籤指定為 span，這就是在瀏覽器中顯示的內容。

Tag

現在顯示的標籤是 span 標籤。當我們點選路由連結進行導航時，我們仍然會看到點選事件。

active-class

預設情況下，當路由連結處於活動狀態時新增的活動類是 router-link-active。我們可以透過設定相同的類來覆蓋它，如下面的程式碼所示。

<style>
   ._active{
      background-color : red;
   }
</style>
<p>
   <router-link v-bind:to = "{ path: '/route1'}" active-class = "_active">Router Link 1</router-link>
   <router-link v-bind:to = "{ path: '/route2'}" tag = "span">Router Link 2</router-link>
</p>

使用的類是 active_class = ”_active”。這是在瀏覽器中顯示的輸出。

Active Class

exact-active-class

應用的預設 exactactive 類是 router-link-exact-active。我們可以使用 exact-active-class 覆蓋它。

示例

<p>
   <router-link v-bind:to = "{ path: '/route1'}" exact-active-class = "_active">Router Link 1</router-link>
   <router-link v-bind:to = "{ path: '/route2'}" tag = "span">Router Link 2</router-link>
</p>

這就是在瀏覽器中顯示的內容。

Exact Active Class

event

目前，router-link 的預設事件是 click 事件。我們可以使用 event 屬性更改它。

示例

<router-link v-bind:to = "{ path: '/route1'}" event = "mouseover">Router Link 1</router-link>

現在，當我們滑鼠懸停在路由連結上時，它將進行導航，如下面的瀏覽器所示。將滑鼠懸停在路由連結 1 上，我們會看到導航發生變化。

Default Event
列印頁面
上一頁
下一頁
廣告