0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

Vuetify の パンくずリスト (Breadcrumbs) のリンクが効かない

Posted at

exacttrue を指定してください。これで改善する場合があります。

<template>
  <v-breadcumbs :items="[
    { text: 'タイトル1', to: '/path/to/link1/', exact: true },
    { text: 'タイトル2', to: '/path/to/link2/', exact: true },
    { text: 'タイトル3', to: '/path/to/link3/', exact: true },
    //                                         ^^^^^^^^^^^^ これです。
  ]" />
</template>

マニュアルを読み落としていました... orz

デフォルトでは、 v-breadcrumbsはネストされたパスの現在のページまでの、すべてのbreadcrumbを無効にします。 items配列の該当する各breadcrumbで exact: true を使用することで、この動作を防ぐことができます。

また、関係ないですが to ではなく href にパスを記述すると画面が更新され、SPA 的な動作をしなくなります。

0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?