vue3中配置路由

1.新建router文件夹

2.在router文件夹新建router.js文件配置路由3.

import { createRouter, createWebHistory } from "vue-router"
const router=createRouter({
    history:createWebHistory(),
    routes：[ {

      path:'/',

      redirect:"/main",

    },

    {

      path: '/home',

      name: 'home',

      component: () => import('@/views/Home/Home.vue')        //路由懒加载按需导入

    },

]
})
export default router

4.在main.js中挂载路由

import { createApp } from 'vue'
import App from './App.vue'
import router from "./router/router"
 
const app=createApp(App)
app.use(router)
app.mount('#app')

5.vue3中的路由api

router-view 子路由出口

路由跳转使用userRouter

 const router = useRouter()

router.go(-1)

获取路由信息useRoute()

 const route = useRoute()

router.getRouters()，获取所有路由信息

query 就是route.query

params就是route.params

路由传参  path+query

  router.push({
    path: `/home/${abc}/listt`,
    query: { aaa }
  })

name+params

  router.push({ name: 'home',params:id })