一、效果：

二、專案結構截圖

三、程式碼

index.js

import { createRouter, createWebHistory,createWebHashHistory } from 'vue-router'
import Home from '../views/Home.vue'

//路由的配置屬組
//paht：路由路勁 必須以/開頭 必填
//component：對應的路由元件 必填
//name：路由的名字
const routes = [
  {
    path: '/',
    name: 'Home',
    component: Home
  },
  {
    path: '/about',
    name: 'About',
	//按需引入
	//如果沒有訪問/about 就不會載入這個元件 節約效能
    component: () => import( '../views/About.vue')
  },
  {
    path: '/test',
    name: 'Test',
  	//按需引入
  	//如果沒有訪問/about 就不會載入這個元件 節約效能
    component: () => import( '../views/Test.vue')
  }
]

//建立路由物件
const router = createRouter({
	//createWebHashHistory hash模式路徑前面會多一個#號
  history: createWebHistory(process.env.BASE_URL),
  routes
})

export default router

About.vue

<template>
    <h1>This is an about page</h1>
</template>

Home.vue

<template>
	 <h1>This is an Home page</h1>
</template>

Test.vue

<template>
    <h1>This is an test page</h1>
</template>