Kite的筆記
0%

Vue3TypeScript(3) - 創建新由

發表於 更新於 分類於
1.5k 3 分鐘

1. 安裝路由

1
npm install vue-router

2. 系統架構配置

2.1. 新增資料夾 src\router

請在src\資料夾底下建立router資料夾，預期結果src\router

2.2. 新增資料夾 src\views

請在src\資料夾底下建立view資料夾，預期結果src\view

2.3. 新增src\view\Home.vue

請在src\views\資料夾底下建立Home.vue，預期結果src\view\Home.vue，並填寫以下內容：

Home.vue

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<template>
    <div>
        <h1>初始化頁面</h1>
    </div>
</template>

<script lang="ts">
export default{

}
</script>

<style scoped>

</style>

2.4. 新增src\router\index.ts

請在src\router\底下建立index.ts檔案，稍候再來填寫，預期結果src\router\index.ts，並填寫以下內容：

index.ts

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
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

2.5. 修改src\main.ts

main.ts

1
2
3
4
5
6
7
8
import './assets/css/reset.css'
import { createApp } from 'vue'
import App from './App.vue'
import router from './router'

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


2.6. 修改src\App.vue

App.vue

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<script setup lang="ts">

</script>

<template>
    <router-view></router-view>
</template>

<style scoped>
html,
body{
    width:100%;
    height:100%;
}
</style>

3. 最後結果

執行npm run dev，預期結果如下：

image-20220806221642538