リンクを動的に切り替える / VueRouter / Vue.js

VueRouter リンクを動的に切り替える

目的

router-linkのtoに変数を展開する

結論

router設定

router-index.js

  {
    path: "/u/:page",
    name: "userdetails",
    component: UserView,
    props: true
  },

• propsを許可
• pathにURLパラメータを設定(:変数)

UserView.vue

<li v-for="(gr, idx) in this.itemGroups" :key="idx">
	<router-link v-bind:to="{
			name: 'userdetails',
			params: {page: gr.name}
		}">
		{{ gr.label }}
	</router-link>
</li>

• router-linkのtoに対して上記のように設定

v-bind:toは注意！（OK: v-bind:to, :to; BAD: to）

参考文献

https://tech.amefure.com/js-vue-router-url