vue-router實作tab標籤頁

本文主要為大家詳細介紹了vue-router實作tab標籤頁的相關方法，具有一定的參考價值，有興趣的夥伴們可以參考一下，希望能幫助大家。

vue-router 是 Vue.js 官方的路由插件，適合用於建立標籤頁應用程式。 Vue 的標籤頁應用是基於路由和元件的，路由用於設定存取路徑，並將路徑和元件映射起來，vue-router 會把各個元件渲染到正確的地方。

首先，.vue中的內容非常簡單，建立標籤，並指定路徑，渲染路由會匹配到的元件。

<template> 
 <p id="account"> 
 <p class="tab"> 
  <!-- 使用 router-link 组件来导航. --> 
  <!-- 通过传入 `to` 属性指定链接. --> 
  <!-- <router-link> 默认会被渲染成一个 `<a>` 标签 --> 
  <router-link to="/account/course">我的课程</router-link> 
  <!-- 注意这里的路径，course和order是account的子路由 --> 
  <router-link to="/account/order">我的订单</router-link> 
 </p> 
 <!-- 路由出口 --> 
 <!-- 路由匹配到的组件将渲染在这里 --> 
 <router-view></router-view> 
 </p> 
</template>

結構很簡單，我們有一個帳戶頁 account，account 中還包含兩個標籤頁，分別是課程 course 和訂單 order。
在寫路由的時候，需要注意頁間層級關係，開始我是這樣寫的：

import Vue from 'vue' 
import Router from 'vue-router' 
import Account from ... 
import CourseList from ... 
import OrderList from ... 
 
Vue.use(Router) 
 
export default new Router({ 
 routes: [ 
 { 
 path: '/account', 
 name: 'account', 
 component: Account 
 }, 
 { 
 path: '/my-course', 
 name: 'course', 
 component: CourseList 
 }, 
 { 
 path: '/my-order', 
 name: 'order', 
 component: OrderList 
 } 
 ] 
})

這樣做會讓點擊 時，跳到新頁面，而不是在 中顯示元件。
正確的路由應該這樣寫：

routes: [ 
 { 
 path: '/account', 
 name: 'account', 
 component: Account, 
 children: [ 
 {name: 'course', path: 'course', component: CourseList}, 
 {name: 'order', path: 'order', component: OrderList} 
 ] 
 } 
]

註冊一個根路由account，將course 和order 註冊為account 中的子路由，和< router-link> 中to="account/course" 對應。 

剛開始做 Vue，這個問題困擾了很久，特此記錄。

關於vue.js元件的教學課程，請大家點選專題vue.js元件學習教學、Vue.js前端元件學習教程，進行學習。

相關推薦：

關於jqueryUI tab標籤頁範例程式碼

JavaScript程式碼分享：tab標籤的切換

js與jquery分別實作tab標籤頁功能的方法

以上是vue-router實作tab標籤頁的詳細內容。更多資訊請關注PHP中文網其他相關文章！