Vue-Routerを使う

インストール

yarn add vue-router@^4.0.3

src/router/index.ts を作成

import { createRouter, createWebHistory, RouteRecordRaw } from "vue-router";

const routes: Array<RouteRecordRaw> = [
  {
    path: "/",
    name: "Home",
    component: () => import("@/views/Home.vue"),
  },
];

const router = createRouter({
  history: createWebHistory(),
  routes,
});

export default router;

src/views/Home.vue を作成

<template lang="pug">
div.home
  p Hello
</template>

<script lang="ts">
import { defineComponent } from "vue";

export default defineComponent({
  name: "Home",
});
</script>

src/App.vue を編集

<template lang="pug">
div#container
  div#nav
    router-link(to="/") Home
    span |
  router-view
</template>
<script lang="ts">
import {defineComponent} from 'vue';
export default defineComponent({
  name: 'App',
});
</script>

src/main.ts を編集

import {createApp} from 'vue';
import App from './App.vue';
import router from './router';

createApp(App).use(router).mount('#app');

Composition API でのVue Routerの使い方

Composition APIのsetupメソッド内ではthisにアクセスできないので、this.$routerという形でルーターオブジェクトにアクセスできない。。

どうするんだろうと調べていたらuseRouter()、useRoute()という関数が追加されているらしい

useRouter()を呼ぶと、this.$router相当のオブジェクト、useRoute()を呼ぶとthis.$route相当のオブジェクトが返却される
※また、テンプレート内では従来通り$router、$routeにアクセスできる

<script lang="ts">
import { defineComponent } from 'vue'
import { useRoute, useRouter } from 'vue-router'

export default defineComponent({
  name: 'Sample',
  setup() {
    const router = useRouter();
    const route = useRoute();

    const { id } = route.params;
    console.log(id);

    const moveTo = (path: string) => {
      router.push(path);
    }

    return {
      moveTo,
    }
  },
})
</script>