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

小云云
リリース: 2018-01-15 10:26:29
オリジナル
2902 人が閲覧しました

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

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>
ログイン後にコピー

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


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 
 } 
 ] 
})
ログイン後にコピー

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


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} 
 ] 
 } 
]
ログイン後にコピー

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

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

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

関連する推奨事項:

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

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

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

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

関連ラベル:
ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
最新の問題
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート
私たちについて 免責事項 Sitemap
PHP中国語ウェブサイト:福祉オンライン PHP トレーニング,PHP 学習者の迅速な成長を支援します!