href でやれば良さそうな気がするんですが、実際にやってみるとルーティングが設定されていないページへのリンクは動かないようです。<b-nav-item-dropdown text="Dropdown">
<b-dropdown-item href="/existing-page">存在するページ</b-dropdown-item>
<b-dropdown-item href="/unexisting-page">存在しないページ</b-dropdown-item>
</b-nav-item-dropdown>上の例では、存在するページの方をクリックするとSPAでページ遷移しますが、存在しないページの方は何も起こらずにそのままになります。
href ではなく to を使う
こうすると遷移してくれるようにはなります。<b-nav-item-dropdown text="Dropdown">
<b-dropdown-item to="/existing-page">存在するページ</b-dropdown-item>
<b-dropdown-item to="/unexisting-page">存在しないページ</b-dropdown-item>
</b-nav-item-dropdown>単純に存在しないページへのリンクなら404が表示されます。しかし今度は外部リンクに遷移できなくなります。理由は
to を使うと router-link を利用しVue内部のページ遷移と解釈されるからです。僕の事情： SPAページとレガシーページが共存している
通常はただ404が表示されるようになるだけなんですけど、僕が今触っているプロジェクトではもうちょっと様子が違います。そのプロジェクトではPHPフレームワーク上のレガシーなページをVueを使ったSPAに段階的に移行中なので、同じドメイン内にSPAへ移行済みのページと、移行前のレガシーなページとが共存しています。で、移行済みのページをhtaccessでPHPフレームワークへの遷移から除外していくイメージ（先達の決定した方針による）。つまり、VueRouter的には存在しないページだけどURL的には存在するページというのがあり得ます。to を使うとページリンクは機能するけど、全て内部リンクと解釈してしまうので、全部404になってしまうんですね。本当はレガシーページに飛ばしたいのに。ダメじゃん。どうすんの
どうやっても綺麗には片付けられなさそうなので、結局はこういう対応をすることにしました。<b-nav-item-dropdown text="Dropdown">
<b-dropdown-item to="/existing-page">存在するページ</b-dropdown-item>
<b-dropdown-item to="/unexisting-page" @click="onClick">存在しないページ</b-dropdown-item>
</b-nav-item-dropdown>methods: {
onClick(event) {
location.href = event.target.href
}
}つまりリンク遷移にむりやり介入して、ページ遷移しちゃうっていう。で、レガシーページをVueに移行出来たら
@click を削除していく。どう考えても綺麗な方針ではありませんが、仕方ないかなと思います……
