vue-router はタブラベルページを実装します

この記事では主にタブページを実装するための関連メソッドを詳しく紹介しますので、興味のある方は参考にしていただければ幸いです。

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>

構造は非常にシンプルです。アカウントページには、コースとオーダーという 2 つのタブページも含まれています。
ルートを書くときは、ページ間の階層関係に注意する必要があります:

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 
 } 
 ] 
})

これにより、b988a8fd72e5e0e42afffd18f951b277 をクリックすると、 975b587bf85a482ea10b0a28848e78a4 でコンポーネントを表示するのではなく、新しいページを表示します。
正しいルートは次のように記述する必要があります:

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

ルートルートアカウントを登録し、

Vue を使い始めたところ、この問題がずっと気になっていたので、ここに記録しておきます。

vue.js コンポーネントのチュートリアルについては、特別な vue.js コンポーネント学習チュートリアルと Vue.js フロントエンド コンポーネント学習チュートリアルをクリックして学習してください。

関連する推奨事項:

jqueryUI タブ ページのサンプル コードについて

JavaScript コードの共有: タブ ラベルの切り替え

js と jquery がそれぞれタブ タブ関数を実装する方法

以上がvue-router はタブラベルページを実装しますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。