Posted: 2018.12.19 / Category: javascript / Tag: Vue

Vue.jsのライブラリ Element UI には el-menu というナビゲーションを設定するコンポーネントがあるのですが、Vue Router を使用する場合 router-link コンポーネントをそのまま入れても一応動きますが、ちゃんとに設定する方法を知ったのでご紹介いたします。

ルーターの設定

詳細は省きますがルーターの設定の配列部分です。nameで名前付きルートを設定した方が後々よさそうです。

router.js

const routes = [
	{ path: '/', name: 'dashboard', component: Dashboard },
	{ path: '/users', name: 'users', component: User },
	{ path: '/tasks', name: 'tasks', component: Task }
];

コンポーネントの設定

ナビゲーション（el-menu）部分です。
el-menu-itemのrouteにルーターで設定したnameを指定します。
基本ページ遷移したときアクティブにしてくれるのですが、初回ロードやリロード時は自動でアクティブしてくれないので、default-activeも設定します。

<el-menu
	:default-active="activeIndex"
	mode="horizontal"
	router>
	<el-menu-item index="dashboard" :route="{ name:'dashboard' }">ダッシュボード</el-menu-item>
	<el-menu-item index="tasks" :route="{ name:'tasks' }">タスク</el-menu-item>
	<el-menu-item index="users" :route="{ name:'users' }">ユーザー</el-menu-item>
</el-menu>

スクリプト部分でactiveIndexの設定をしましょう。

export default {
	data() {
		return {
			activeIndex: ''
		}
	},
	mounted() {
		// 読み込まれたページをアクティブ
		this.activeIndex = this.$route.name;
	}
}