新建路由的过程vue-router4

npm i vue-router@next
createWebHashHistory为hash模式

1.新建router文件夹，index.ts
2.main.ts引入
1
2

index.ts文件：
import { createRouter, createWebHashHistory, RouteRecordRaw } from "vue-router";
const routes: Array = [
    {
        path: '/',
        component: () => import('@/components/layout.vue')
    }
]
const router = createRouter({
    history: createWebHashHistory(),
    routes: routes
})
export default router
1
2
3
4
5
6
7
8
9
10
11
12
13

main.ts文件:
import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
createApp(App).use(router).mount('#app')
1
2
3
4
5