vue3引入路由

vue3引入vue-router
一：引入路由

npm install vue-router@4

二：在src目录下创建router文件夹和index.ts文件
在index.ts中创建路由，引入3个api，createRouter, createWebHistory, RouteRecordRaw(数组类型的路由)

//引入路由对象
import { createRouter, createWebHistory, RouteRecordRaw } from 'vue-router'

// 每个路由都需要映射到一个组件。
const routes: Array<RouteRecordRaw> = [{
    path: '/',
    component: () => import('../components/a.vue')
}]
 
const router = createRouter({
    history: createWebHistory(),
    routes
})
 
//导出router
export default router

在main.ts中挂载路由

import router from './router'

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

三：3不支持this.$router.push这种方式，需要引入useRoute 这个api

import { useRouter } from 'vue-router'
export default {
    setup() {
        const userRouter = useRouter()
        userRouter.push({
            path: '/about',
        })
    }
}