<template>
  <div>
    <h1>vue-router 的基本使用</h1>
    <!-- 宣告路由連結 -->
    <router-link to="/home">首頁</router-link>&nbsp;
    <router-link to="/movie">電影</router-link>&nbsp;
    <router-link to="/about">關於</router-link>
    <hr />
 


    <!-- 路由的佔位符 -->
    <router-view></router-view>
  </div>
</template>

<script>
export default {
  name: 'MyApp',
}
</script>

<style></style>

 router.js

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

import Home from './MyHome.vue'
import Movie from 
 
'./MyMovie.vue'
import About from './MyAbout.vue'

// 建立路由物件
const router = createRouter({
  // 指定路由的工作模式
  history: createWebHashHistory(),
  // 自定義路由高亮的 class 類
  linkActiveClass: 'active-router',
  // 宣告路由的匹配規則
  routes: [
    { path: '/', redirect: '/home' },
    { path: '/home', component: Home },
    { path: 
 
'/movie', component: Movie },
    { path: '/about', component: About },
  ],
})

// 匯出路由物件
export default router

main.js

import router from './components/07.next/router'

const app = createApp(App)

// 掛載路由模組
app.use(router)

app.mount('#app')