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>