首頁 > 文章 > web前端 > vue-router實作tab標籤頁

vue-router實作tab標籤頁

小云云原創: 2018-01-15 10:26:292920瀏覽

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

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

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

<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 &#39;vue&#39; 
import Router from &#39;vue-router&#39; 
import Account from ... 
import CourseList from ... 
import OrderList from ... 
 
Vue.use(Router) 
 
export default new Router({ 
 routes: [ 
 { 
 path: &#39;/account&#39;, 
 name: &#39;account&#39;, 
 component: Account 
 }, 
 { 
 path: &#39;/my-course&#39;, 
 name: &#39;course&#39;, 
 component: CourseList 
 }, 
 { 
 path: &#39;/my-order&#39;, 
 name: &#39;order&#39;, 
 component: OrderList 
 } 
 ] 
})

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

routes: [ 
 { 
 path: &#39;/account&#39;, 
 name: &#39;account&#39;, 
 component: Account, 
 children: [ 
 {name: &#39;course&#39;, path: &#39;course&#39;, component: CourseList}, 
 {name: &#39;order&#39;, path: &#39;order&#39;, component: OrderList} 
 ] 
 } 
]

註冊一個根路由account，將course 和order 註冊為account 中的子路由，和4bafd91003d53ef187a06b79114d3fd8 中to="account/course" 對應。

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

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

vue-router實作tab標籤頁

相關文章