Vue.jsのリンクの貼り方について

はじめに

Vue.jsのリンクの貼り方について。
Vue.js routerについて、少しハマったので忘れないようにまとめる。

注意

最新の状態を確認して下さい。

参考さまはこちら

最終更新日

2023年7月12日

環境

OS
macOS Big Sur 11.3

バージョンなど

%  vue -V
@vue/cli 5.0.8

$ node -v
v18.0.0

$ npm -v
8.6.0

状況

インストールする。

npm install vue-router

改装としてはファイルをこのように作る。
大文字などにうるさいので気をつける。

 % tree  
├── src
│   ├── App.vue
│   ├── assets
│   │   └── logo.png
│   ├── components
│   │   ├── AboutTest.vue
│   │   ├── HelloWorld.vue
│   │   └── HomeTest.vue
│   ├── index.css
│   ├── main.js
│   ├── page
│   │   └── index.vue
│   └── router
│       └── index.js
└── vue.config.js

例としてこのように作る。

router/index.js

import { createRouter, createWebHistory } from 'vue-router'
import HomeTest from '@/components/HomeTest.vue'
import AboutTest from '@/components/AboutTest.vue'

const routes = [
  {
    path: '/',
    name: 'home',
    component: HomeTest
  },
  {
    path: '/about',
    name: 'abouttest',
    component: AboutTest
  },
]

const router = createRouter({
  history: createWebHistory(process.env.BASE_URL),
  routes
})

export default router

main.js

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

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

表示側はこちら。

HomeTest.vue

<template>
 <router-link to="/">ホーム</router-link>
</template>

補足

createWebHistoryはなに？

import { createRouter, createWebHistory } from 'vue-router'

ルーター インスタンスを作るときのモードである。
https://router.vuejs.org/guide/essentials/history-mode.html

終わり

無事に移動できるようになった。