• 2021/12/26
• 3分

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

＼ アプリをリリースしました ／

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

posted withアプリーチ

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

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

Vue Routerの使い方

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

実現したいこと

• router-linkのto属性に変数を組み込みたい
• router-linkのto属性にクエリを組み込みたい

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

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

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

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

やるべきこと

• router.jsのルートでpropsを許可する
• to属性をv-bindで操作できるようにする
• オブジェクト形式で指定したい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)のようにしておきます。

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

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>

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

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