この記事では主にタブページを実装するための関連メソッドを詳しく紹介しますので、興味のある方は参考にしていただければ幸いです。
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 '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} ] } ]
ルートルートアカウントを登録し、
Vue を使い始めたところ、この問題がずっと気になっていたので、ここに記録しておきます。
vue.js コンポーネントのチュートリアルについては、特別な vue.js コンポーネント学習チュートリアルと Vue.js フロントエンド コンポーネント学習チュートリアルをクリックして学習してください。
関連する推奨事項:
JavaScript コードの共有: タブ ラベルの切り替え
js と jquery がそれぞれタブ タブ関数を実装する方法
以上がvue-router はタブラベルページを実装しますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。