【Vue.js 】Routerで動的にリンクを切り替える方法!URLの末尾を変数やクエリでフレキシブルに!

この記事からわかること

  • Vue Router動的URLを変更する方法
  • URL末尾を状況に応じて切り替える
  • URLと変数を結合する方法
  • URLにクエリ文字を含ませる方法
  • router-linkに記述するコツ

index

[open]

\ アプリをリリースしました /

みんなの誕生日

友達や家族の誕生日をメモ!通知も届く-みんなの誕生日-

posted withアプリーチ

Vue Routerを使ってリンクを作成するときにリンク先のURLを動的に切り替えたいときに使える方法をまとめていきます。

例えば記事idが変数に格納されていてその変数をURL末尾につけることで状況に応じたURLを生成するときなどに使えるテクニックです。

Vue Routerの使い方

まず初めにVue Routerの使い方と実現したい事をまとめておきます。

実現したいこと

Vue Routerではページ移動のリンクにrouter-linkタグを使います。router-linkタグのto属性移動先のURLを指定することでブラウザ上ではアンカータグ(a要素)に変換され、リンクが生成されます。

<router-link to="URL">クリック</router-link>

Vue Routerで動的にリンクを切り替える方法

このURL部分に変数を含めて状況に応じて切り替える方法をまとめていきます。

やるべきこと

やるべきことを果たすことで今回は/post/○ (○部分に記事id番号を付与)のようにしてフレキシブルなURL偏移を実現させたいと思います。

https://ドメイン.com/post/2

まずはVue Routerの心臓部分である「router.js(またはrouter>index.js)」を変更していきます。

router.js

export default new Router({
    mode: 'history',
    base: process.env.BASE_URL,
    routes: [
        {
            path: "/post/:id",
            component: PostComponent,
            name: "post",
            props: true,
        },
    ]
})

routesの中にルーティングを作成し、path部分の変数を埋め込みたい箇所を:id(id部分は好きな文字でOK)のようにしておきます。

そしてpropstrueを渡してあげることで変数を受け渡すことが可能になります。

router-linkタグの記述方法

続いてrouter-linkタグの記述方法です。

<router-link v-bind:to="{ 
  name: 'post',
  params: {id: data } 
}
">クリック</router-link>

まずはv-bind属性の中を操作できるようにしておきます。そこにオブジェクト形式で指定したいルーティングの名前nameに、変数を埋め込む場所として宣言した:idをキー値として渡したい変数をオブジェクトにしてparamに記述します。

これでその時に格納されている変数の値によってrouter-linkタグのリンク先URLを変更することができます。

クエリパラメータを渡す方法

Vue Routerでも以下のようなクエリパラメータを付与することが可能です。

https://ドメイン.com/post?id=2

使用方法は簡単でrouter-linkタグ部分にquery:{id: 変数や式 }の形式で追記するだけです。

例えば先ほどの記事idをURLではなくクエリ文字として渡す場合は以下のような記述方法になります。

<router-link v-bind:to="{ 
  name: 'post',
  query: {id: data } 
}
">クリック</router-link>

まだまだ勉強中ですので間違っている点や至らぬ点がありましたら教えていただけると助かります。

ご覧いただきありがとうございました。

searchbox

スポンサー

ProFile

ame

趣味:読書,プログラミング学習,サイト制作,ブログ

IT嫌いを克服するためにITパスを取得しようと勉強してからサイト制作が趣味に変わりました笑
今はCMSを使わずこのサイトを完全自作でサイト運営中〜

自作iOSアプリ

\ アプリをリリースしました /

mapping

自分だけの地図を作ろう!-mapping-

無料posted withアプリーチ

割り勘アプリ-bill-

旅行におすすめ!
割り勘アプリ-bill-

無料posted withアプリーチ

Imakoko

現在地を取得するアプリ!Imakoko

無料posted withアプリーチ

ふるログ

ふるさと納税管理アプリ-ふるログ-

無料posted withアプリーチ

Remind-シンプル通知アプリ-

シンプル通知アプリ-Remind-

無料posted withアプリーチ

CLIPURL

好きな記事をクリップしよう!-CLIPURL-

無料posted withアプリーチ

記録カレンダー

続けたを可視化できるアプリ!記録カレンダー

無料posted withアプリーチ

CART-共有できるお買い物リスト-

CART-共有できるお買い物リスト-

無料posted withアプリーチ

QuickPressPanel

早押しゲーム-QuickPressPanel-

無料posted withアプリーチ

貸し借り管理アプリ

友達とのお金の管理-貸し借り管理アプリ-

無料posted withアプリーチ

みんなの誕生日

友達や家族の誕生日をメモ!通知も届く-みんなの誕生日-

posted withアプリーチ

Githubにて
iOSアプリのソースコードを公開中!

自作Webアプリ

子育て知識共有サイト-mikata-

子育て知識共有サイト-mikata-

New Article

index