Vue Routerを使ってURLを動的に制御する方法

n.yuumi
n.yuumi

Vue Routerとは

Vue Routerは、Vue.jsの公式ルータで、ルーティング制御をするためのさまざまな機能を利用することができます。
 

ゴール

今回は、Vue Routerを用いてURLを動的に制御できるようにしていきます。
 

環境構築

まず、プロジェクトを作成します。Vue CLIを使って環境を作っていきましょう。
まだインストールされていない方は下記コマンドを実行してください。
 
インストール
npm install -g @vue/cli
 
プロジェクト作成
vue create example-router
 

ページ作成(component使用)

Vue Routerを使う前に、componentタグで表示切り替えができるページを作成していきます。
下記４つのファイルをそれぞれ作成してください。
/example-router/src
main.js、App.vue
 
/example-router/src/components
TestPage01.vue、TestPage02.vue
 
main.js
import { createApp } from 'vue';
import App from './App.vue';
const app = createApp(App);
app.mount('#app');
App.vue
<template>
  <div>
    <a href="#" @click="setPage('test-page01')">Test Page01</a>
    <a href="#" @click="setPage('test-page02')">Test Page02</a>
  </div>
  <component :is="activePage"></component>
</template>

<script>

import TestPage01 from './components/TestPage01.vue'
import TestPage02 from './components/TestPage02.vue'

export default {
  name: 'App',
  components: {
    TestPage01, TestPage02
  },
  data() {
    return {
      activePage: 'test-page01'
    }
  },
  methods: {
    setPage(page) {
       this.activePage = page;
    }
  }
}
</script>
TestPage01.vue
<template>
    <p>This is Test Page 01</p>
</template>
TestPage02.vue
<template>
    <p>This is Test Page 02</p>
</template>
今の状態では、Test Page 01、Test Page 02リンクを押下して表示を切り替えることが可能ですが、
URLは動的に変わりません。
 
Screen Shot 2021-05-25 at 10.04.29.png
 
Screen Shot 2021-05-25 at 10.04.37.png

Vue RouterでURLを動的に変更

ファイルを作成する前に、Vue Routerのインストールが必要ですので、下記コマンドを実行してください。
@nextをつけると最新版をインストールすることができます。
npm install --save vue-router@next
 
まず、App.vueから設定していきます。
Vue Routerでは、router-link、router-viewというタグが用意されています。名前から想定できるかと思いますが、
router-linkはアンカータグの役割を持ち、router-viewでは表示の切り替え処理が可能です。
では、App.vueを書き換えていきましょう。
 
リンク
Vue Routerを使わない場合
イベントハンドリングでページの切り替え処理を行います。
（setPage処理に関しては、上で定義したApp.vueを参照してください）
<a href="#" @click="setPage('test-page01')">Test Page01</a>
<a href="#" @click="setPage('test-page02')">Test Page02</a>
 
Vue Routerを使う場合
to 属性でパスの指定が可能です。
<router-link to="/test-page01">Test Page01</router-link>
<router-link to="/test-page02">Test Page02</router-link>
 
ビュー
Vue Routerを使わない場合
is 属性で表示切り替えを行います。
（activePageに関しては、上で定義したApp.vueを参照してください）
<component :is="activePage"></component>
 
Vue Routerを使う場合
ルートとマッチしたコンポーネントが自動で表示されるので、属性指定などは不要です。
<router-view></router-view>
 
App.vue
<template>
  <div>
    <router-link to="/test-page01">Test Page01</router-link>
    <router-link to="/test-page02">Test Page02</router-link>
  </div>
  <router-view></router-view>
</template>

<script>

import TestPage01 from './components/TestPage01.vue'
import TestPage02 from './components/TestPage02.vue'

export default {
  name: 'App',
  components: {
    TestPage01, TestPage02
  },
}
</script>
次に、ルーターの設定です。
main.jsと同じ階層にrouter.jsを作成し、main.jsで読み込むようにしましょう。
 
import { createApp } from 'vue';
import App from './App.vue';
import router from './router.js'; // Add
const app = createApp(App);
app.use(router); // Add
app.mount('#app');
それではいよいよルーターの設定を行っていきます。
 
createRouter、createWebHistory
まず、createRouter、createWebHistoryをインポートしましょう。
createRouter()により、ルーティング情報を扱うルータの生成が可能になります。
また、history設定にはcreateWebHistory()を定義してください。
 
import { createRouter, createWebHistory } from 'vue-router';

const router = createRouter({
  history: createWebHistory(),
   ...
});
ルート設定
routes設定に名前、パス、コンポーネントをそれぞれ設定していきます。
{ name: 'test1', path: '/test-page01', component: TestPage01 }
{ name: 'test2', path: '/test-page02', component: TestPage02 }
 
また、リダイレクトや404の設定もしていきましょう。
リダイレクト
ルートパスにアクセスした場合、/test-page01にリダイレクトするようになります。
{ path: '/', redirect: '/test-page01' },
404
/test-page01、/test-page02以外のパスでアクセスした場合、404ページを表示するようにします。
/componentsにNotFound.vueを作成し、「Page not found」など任意のテキストを定義してください。
{ path: '/:notFound(.*)', component: NotFound }
 
import TestPage01 from './components/TestPage01.vue';
import TestPage02 from './components/TestPage02.vue';
import NotFound from './components/NotFound.vue';

const router = createRouter({
  history: createWebHistory(),
  routes: [
    { path: '/', redirect: '/test-page01' },
    { name: 'test1', path: '/test-page01', component: TestPage01 },
    { name: 'test2', path: '/test-page02', component: TestPage02 },
    { path: '/:notFound(.*)', component: NotFound }
  ],
});
アクティブリンク
router-linkタグには、元々router-link-active、router-link-exact-activeクラスが自動で適用されますが、それらの名前を任意の名前に変更することが可能です。
 
Screen Shot 2021-05-25 at 16.36.11.png
 
ここでは下記の通り、クラス名を変更してみます。
-router-link-activeクラスをexample-active
-router-link-exact-activeクラスをexample-exact-active
 
const router = createRouter({
  routes: [
    ...
  ],
  linkActiveClass: 'example-active',
  linkExactActiveClass: 'example-exact-active',
});
設定が終わったら最後に生成したVue Routerインスタンスをエクスポートします。
エクスポートしないと何も表示されません。忘れずに定義してください！
export default router;
 
以上、設定が終わりましたらブラウザからアクセスしてみてください。
ブラウザの表示とURLが動的に変わることを確認できるかと思います。
 
import { createRouter, createWebHistory } from 'vue-router';

import TestPage01 from './components/TestPage01.vue';
import TestPage02 from './components/TestPage02.vue';
import NotFound from './components/NotFound.vue';

const router = createRouter({
  history: createWebHistory(),
  routes: [
    { path: '/', redirect: '/test-page01' },
    { name: 'test1', path: '/test-page01', component: TestPage01 },
    { name: 'test2', path: '/test-page02', component: TestPage02 },
    { path: '/:notFound(.*)', component: NotFound }
  ],
  linkActiveClass: 'example-active',
  linkExactActiveClass: 'example-exact-active',
});

export default router;

Screen Shot 2021-05-25 at 16.45.41.png

 

Screen Shot 2021-05-25 at 16.46.10.png

 

Screen Shot 2021-05-25 at 16.46.31.png

 

想定通りの表示が確認できたでしょうか？
Vue Routerには他にも様々な機能が存在するので、色々と試してみてください！
 
 
＜ 前へ 一覧へ戻る 次へ ＞