[Vue.js] 在 VIte 內使用 Vue-Router

要在 Vite 內使用 vue-router 來設定路由的話，可以參考本篇，首先請先安裝 Vite。

安裝 vue-router

接著 npm 安裝 vue-router

npm install vue-router@4 --save

設定 vue-router

在 main.js 做以下設定

import { createApp } from 'vue'
import { createRouter, createWebHistory } from 'vue-router'
import './style.css'
import App from './App.vue'

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

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

設定 router 以及對應的檔案

import { createApp } from 'vue'
import { createRouter, createWebHistory } from 'vue-router'
import './style.css'
import App from './App.vue'
import Home from './views/Home.vue'
import About from './views/About.vue'

const routes = [{
  	path: "/",
  	name: "Home",
  	component: Home
  },
  {
	path: "/about",
	name: "About",
	component: About
},]

頁面間的連結

如果要連結各個頁面則要透過 router-link

<router-link to="/">Home</router-link> | <router-link to="/about">About</router-link>

動態路由

如果要在 router 帶變數，則像這樣設定：

import User from './views/User.vue'

{
	path: "/user/:id",
	name: "User",
    	component: User
  }

要在頁面取得變數則是透過 $route: {{$route.params.id}}

比對失敗頁面

如果連結的路徑不是既有的設定，可以像這樣給 404 之類的頁面，這個 route 的設定一般是放在最後面

{
    path: "/:pathMatch(.*)*", 
    name: 'NotFound', 
    component: NotFound
}