二、Vueのルータータグアセンブリを提供

(クリック)ナビゲーションの機能をルーティングしてユーザアプリケーションをサポートしています。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という名前のビューと呼ばれるには、対応するルーティングコンフィギュレーションに対応するコンポーネントをレンダリングします。マルチビューを処理します。

おすすめ

転載: www.cnblogs.com/yuxi2018/p/11967254.html