vue 3.0 创建router

//router.js

import { createRouter, createWebHistory } from 'vue-router'
import home from '../views/home/home.vue'
const routes = [
    {
      path: '/',
      name: 'home',
      component: home
    },
    {
      path: '/test',
      name: 'Test',
      component: () => import('../views/test/test.vue')
    }
  ]
   const router = createRouter({
    history:createWebHistory(process.env.BASE_URL),
    routes
  })
  export default router
 //文档地址https://next.router.vuejs.org/guide/

//main.js

import { createApp } from 'vue'
import App from './App.vue'
import router from "./router/index";

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

//app.vue
<template>
 <div id="app">
    <router-view/>
  </div>
</template>

<script>

export default {
  name: 'App',
  components: {
  
  }
}
</script>

如果路由遇到 未捕获的TypeError：Object（…）不是函数
解决办法：
当您将Vue路由器3与Vue 3一起安装时，会导致此问题，因此您应该卸载当前版本
npm uninstall vue-router --save
并通过安装新的：
npm i vue-router@next --save