ダッシュで奪取

自分用のメモ

【Vue.js】BootstrapVueのナビゲーションバーで、Vue Routerのリンクを使いたい

環境
  • Vue.js:2.6.11
  • Vue Router:3.1.3
  • BootstrapVue:2.2.0

1. 困ったこと

  • 全体的に素のBootstrapで書いていたので、BootstrapVueの書き方に修正中

  • ナビゲーションバーの部分について、とりあえず公式をほぼコピペして作成

src/App.vue
  • こんな感じかな…?
<!-- ヘッダーメニュー -->
<b-navbar toggleable="lg" type="dark" variant="dark">
  <b-navbar-brand href="#">テスト</b-navbar-brand>
  <!-- メニューリンク -->
  <b-navbar-toggle target="nav-collapse"></b-navbar-toggle>
  <b-collapse id="nav-collapse" is-nav>
    <!-- Home -->
    <b-navbar-nav>
      <b-nav-item href="/">ほーむ</b-nav-item>
    </b-navbar-nav>
    <!-- About -->
    <b-navbar-nav>
      <b-nav-item href="/about">あばうと</b-nav-item>
    </b-navbar-nav>
  </b-collapse>
</b-navbar>
だめだった
  • せっかくのVue Routerなのに、リンクをクリックすると画面遷移してしまう!!

  • a href〜なのでそりゃそうだという感じ

<!-- 今書いたもの -->
<b-nav-item href="/about">あばうと</b-nav-item>

<!-- これと同じ動きにしたい -->
<router-link to="/about" class="nav-link">あばうと</router-link>

2. 対処

  • href=〜 の部分を、to=〜 に書き換えたら、同じ動きになった!
<!-- NG -->
<b-nav-item href="/about">あばうと</b-nav-item>

<!-- OK -->
<b-nav-item to="/about">あばうと</b-nav-item>

3. 参考URL