vueのナビゲーションリンクコンポーネントとは何ですか?

Vue のナビゲーション リンク コンポーネントは「router-link」です。 「」コンポーネントは、ユーザーがルーティング機能を備えたアプリケーション内でクリックして移動し、to 属性を通じてターゲット アドレスを指定できるようにします。構文は「...」です。 -link>"; デフォルトのレンダリングは、正しい接続を持つ "" タグですが、タグ属性を構成することで他のタグを生成できます。

# このチュートリアルの動作環境: Windows7 システム、vue3 バージョン、DELL G3 コンピューター。

Vue のナビゲーション リンク コンポーネントは「router-link」です。

vue コンポーネントのルーターリンクの紹介

コンポーネントは、ユーザーがルーティング機能ナビゲーションを使用してアプリケーション内でクリックできるようにします。 。 to 属性を使用してターゲット アドレスを指定します。

デフォルトのレンダリングは、正しい接続を持つ タグです。 タグ属性を構成することで、他のタグを生成できます。また、 対象ルートの活性化に成功すると、リンク要素 に活性化を示す CSS クラス名が自動的に設定されます。

router-link はどこですか?

ここに示されているメイン ページのルーター リンク
つまり、App.vue にあります (なぜメイン ページなのかIn App で書かれているので、index.html に書くべきではないでしょうか? いやいや、ここではこのページから取得したコンテンツをメインページにレンダリングします) [関連する推奨事項:
• vuejs 入門チュートリアル

  , web フロントエンド ]

App.vue の好きな場所に記述します

#router-link の使用方法

対応するコンポーネントを作成する必要があります

• コンポーネントの対応するルーティング アドレスを記述する必要があります

• App.vue ページに対応する (リンク) を書き込みます

• ルーティングを書き込みます詳細なプロセスは上記の記事に記載されていますが、ここでは簡単に紹介します

1. 対応するコンポーネント

2 を作成する必要があります。コンポーネント

3 に対応するルーティング アドレスを記述する必要があります。アプリ上に対応する (リンク)

を記述します。 vue ページ

結果表示:

内部コンテンツの紹介

<router-link to="/">Home</router-link>

ここの to 属性は、ルートをジャンプするためのパス (アドレス) を指定します。 )。

この中の to は、指定したパスと一致している必要があり、大文字と小文字は区別されません。

• 追加: タグはタブを再度開くので許可されていません。また、その効果も達成できますが、router-link

ほどフレンドリーではありません。 #拡張知識: router- リンクの属性

コンポーネントの属性は次のとおりです:

to、replace、append、tag、active- class、exact、event、exact-active-class

1、to (必須パラメータ): type string/location

は、ターゲット ルートのリンクを表します。 value は文字列であるか、ターゲットの場所を記述する動的にバインドされたオブジェクトです。

次の例

//下面是字符串的形式
<router-link to="home">Home</router-link>

//下面几种为动态绑定，v-bind: 可以简写为:


<router-link :to="&#39;index&#39;">Home</router-link>

/*但注意这个组件的导出需要有类似下面的代码
export default {
  name: &#39;App&#39;,
  data(){
    return {
      index:&#39;/&#39;
    }
  }
}
*/

<router-link :to="{ path: &#39;/home&#39; }">Home</router-link>
/*
这个路径就是路由中配置的路径
*/
<router-link :to="{ name: &#39;User&#39;}">User</router-link>
/*
  在路由的配置的时候，添加一个name属性，例如：
 routes: [
    {
      path:&#39;/home&#39;,
      name:&#39;User&#39;,
      component:home
    }
]
*/

2、tag

タイプ: string

デフォルト値: "a"

を、

などの何らかの種類のラベルにレンダリングする場合。そこで、tag prop クラスを使用してタグの種類を指定します。それでもクリックをリッスンしてナビゲーションをトリガーします。

      <router-link :to="&#39;index&#39;"
                   tag="li"
                   event="mouseover">Home
      </router-link>

このとき、この li タグにタグを追加したい場合、以下に示すように、a タグに href 属性を追加することはできません。

        <router-link :to="{name:&#39;Home&#39;}" tag="li">
        <a>Home</a>
        </router-link>

この場合、< ;a> は実際のリンクとして使用され (正しい href が取得されます)、「アクティベーション CSS クラス名」は外側の

に設定されます。

3、アクティブクラス

タイプ: 文字列

デフォルト値: "router-link-active"

link アクティブ化するときに使用する CSS クラス名。デフォルト値は、ルートの構築オプション linkActiveClass を介してグローバルに設定できます。

<router-link :to="{path:&#39;/about&#39;}"
                   active-class="activeClass"                  
      >about</router-link>

デフォルト値は、次の例に示すように、ルートの構築オプション linkActiveClass を通じてグローバルに設定されます:

export default new Router({
  mode:'history',
  linkActiveClass:'is-active',
  routes: [
    {
      path:'/about',
      component:about
    }
]
})

4,exact-active-class

タイプ: 文字列

デフォルト値: "router-link-exact-active"

配置当链接被精确匹配的时候应该激活的 class。注意默认值也是可以通过路由构造函数选项 linkExactActiveClass 进行全局配置的。

5、exact

类型: boolean

默认值: false

"是否激活" 默认类名的依据是 inclusive match (全包含匹配)。 举个例子，如果当前的路径是 /a 开头的，那么 也会被设置 CSS 类名。

按照这个规则，每个路由都会激活！想要链接使用 "exact 匹配模式"，则使用 exact 属性：

        <li><router-link to="/">全局匹配</router-link></li>
        <li><router-link to="/" exact>严格匹配</router-link></li>

简单点说，第一个的话，如果地址是/aa,或/aa/bb，……都会匹配成功，

但加上exact，只有当地址是/时被匹配，其他都不会匹配成功

6、event

类型: string | Array

默认值: 'click'

声明可以用来触发导航的事件。可以是一个字符串。

<router-link to="/document" event="mouseover">document</router-link>

如果我们不加event，那么默认情况下是当我们点击document的时候，跳转到相应的页面，但当我们加上event的时候，就可以改变触发导航的事件，比如鼠标移入事件

7、replace

类型: boolean

默认值: false

设置 replace 属性的话，当点击时，会调用 router.replace() 而不是 router.push()，于是导航后不会留下 history 记录。

8、append

类型: boolean

默认值: false

设置 append 属性后，则在当前 (相对) 路径前添加基路径

【相关推荐：vuejs视频教程】

以上がvueのナビゲーションリンクコンポーネントとは何ですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。