ルータ・リンクアセンブリのタブナビゲーションの宣言
(クリック)ナビゲーションの機能をルーティングしてユーザアプリケーションをサポートしています。to
アドレス属性をターゲットに、デフォルトのレンダリングに<a>
タグを設定することができますtag
別のタグの属性を生成します。また、ターゲットが正常に活性化されたルーティングするときに、自動的にリンク要素を設定するの活性化表すCSS
クラス名。デフォルト:router-link-active
グローバルクラス名を活性化するように構成することができる、プロパティは、単一の活性要素クラス名の形で提供されてもよいです。
活性化されたクラス外側要素の応用
外側の要素は、他のラベルでなければならない<a>
ラベルが有効に本当のリンク、となるCSS
ラベル上のクラス名は要素の外側の層に設定されています。
<router-link tag="li" to="/login">
<a>Login</a>
</router-link>
<!-- 最终输出结果为: -->
<li class="router-link-exact-active router-link-active"><a href="/login">Login</a></li>
ルータ・リンクパラメータ
to:
宛先ルーティングパスの属性が必要です。すぐ内側に、クリックされたto
値に達したrouter.push()
ので、この値は、文字列、または対象物の目標位置を記述することができます。replace:
プロパティ、クリックされたときに、呼び出しますrouter.replace()
、残していないhistory
レコードを、これがでなければなりませんhistory
エフェクトモードを取ります。append:
属性は、パスグループは、現在の(相対)パスの前に添加されます。例えば:から/a
ジャンプボランティア相対パスに/b
、構成されていない場合append
、パスで/b
、設定されている場合、用/a/b
tag:
プロパティは、指定されたラベルにレンダリングすることができますactive-class:
プロパティは、デフォルト値がされてrouter-link-active
活性化するために、リンクの設定に使用するCSS
クラス名を、設定オプションをルーティングすることができlinkActiveClass
、グローバルコンフィギュレーションにexact:
属性、完全一致パスevent:
プロパティは、イベントトリガーは、ナビゲーションのために指定することができ、文字列にすることができ、それはまた含む文字列の配列にすることができますexact-active-class:
プロパティは正確に設定されたクラス名と一致しています
<!-- to:属性的一些常用方式 -->
<!-- 字符串 -->
<router-link to="home">Home</router-link>
<!-- 渲染结果 -->
<a href="home">Home</a>
<!-- 使用 v-bind 的 JS 表达式 -->
<router-link v-bind:to="'home'">Home</router-link>
<!-- 参数为对象的形式 -->
<router-link :to="{ path: 'home' }">Home</router-link>
<!-- 命名路由 /user/123 -->
<router-link :to="{ name: 'user', params: { userId: 123 }}">User</router-link>
<!-- 带查询参数 /register?plan=private -->
<router-link :to="{ path: 'register', query: { plan: 'private' }}">
Register</router-link>
組立ルータビュービューのルート(輸出用ルート)
<router-view>
ビューコンポーネントに整合パスレンダリング。これは、ネストされたコンポーネントをレンダリングする、埋め込まれた経路に従って、内部に入れ子にすることができます。配合してもよい<transition>
し、<keep-alive>
固定文言として使用します:
<transition>
<keep-alive>
<router-view></router-view>
</keep-alive>
</transition>
name:
属性のデフォルトdefault
という名前のビューと呼ばれるには、対応するルーティングコンフィギュレーションに対応するコンポーネントをレンダリングします。マルチビューを処理します。