05.配置vue-router

安装路由包


npm install vue-router@4

src目录下新建router文件夹，router目录下新建index.ts文件，用如下内容天成index.ts：

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19



import { createRouter, createWebHistory, RouteRecordRaw } from 'vue-router'
import Layout from '@/components/HelloWorld.vue'

const routes: Array<RouteRecordRaw> = [
  {
    path: '/home',
    name: 'Home',
    component: Layout
  }
]

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

export default router

修改main.ts，内容如下：

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15



import {createApp} from 'vue'
import '@/style.css'
import App from '@/App.vue'
// 新增内容
import router from "@/router";

const app = createApp(App)

// 新增内容
app.use(router)

app.mount('#app')