problema de error de enrutamiento vue2.x vue-router4.x

Configuración de vue2.x, vue-router3.x

enrutador/index.js

import Vue from 'vue'   //引入Vue

import Router from "vue-router" //引入vue-router


import TTS from '@/views/tts/index.vue' 
 
Vue.use(Router) //Vue全局使用Router

export const constantRoutes = [
    {
    
                        //每一个链接都是一个对象
        path: '/tts',         //链接路径
        name: 'TTS',     //路由名称，
        component: TTS   //对应的组件模板
    }
]

const router = new Router({
    
    
    routes: constantRoutes,
    mode: 'history'
})
 
export default router

principal.js

import Vue from 'vue'
import App from './App.vue'
import router from './router'

Vue.config.productionTip = false

new Vue({
    
    
  router: router,
  render: h => h(App),
}).$mount('#app')

Capítulo 1 Elemento personalizado desconocido: ¿registró el componente correctamente? Para componentes recursivos, asegúrese de proporcionar la opción "nombre".

Tenga en cuenta que las versiones de vue y del enrutador
usan vue2 para instalar la versión del enrutador 3 correspondiente.
Use vue3 para instalar la versión del enrutador 4 correspondiente.

Preguntas 2 y 3, aunque los problemas de vue2.x y vue-router4.x se pueden resolver, todavía habrá otros problemas en la etapa posterior, así que cambie la versión directamente, por ejemplo:
router-view \ router-link no puede ser usado

Unknown custom element: <router-view> - did you register the component correctly? For recursive components, make sure to provide the "name" option.

La exportación 'predeterminada' del artículo 2 (importada como 'Enrutador') no se encontró en 'vue-router'

Entorno: vue2.x, vue-router4.x
Descripción del problema: la exportación 'predeterminada' (importada como 'Router') no se encontró en 'vue-router'

 WARNING  Compiled with 1 warning                                                                                       14:09:06

 warning  in ./src/router/index.js

export 'default' (imported as 'Router') was not found in 'vue-router' (possible exports: NavigationFailureType, RouterLink, RouterView, START_LOCATION, createMemoryHistory, createRouter, createRouterMatcher, createWebHashHistory, createWebHistory, isNavigationFailure, loadRouteLocation, matchedRouteKey, onBeforeRouteLeave, onBeforeRouteUpdate, parseQuery, routeLocationKey, routerKey, routerViewLocationKey, stringifyQuery, useLink, useRoute, useRouter, viewDepthKey)

enrutador.js original

import Vue from 'vue'
import Router from 'vue-router'
 
import TTS from '@/views/tts/index.vue' 
 
Vue.use(Router)
 
const routes = [
    {
    
    
        path: '/tts',
        component: TTS
    }
]
 
const router = new VueRouter({
    
    
    routes,
    mode: 'history'
})
 
export default router

Vue-router3.x no es un problema y se puede usar normalmente. Desde que uso vue-router4.x, la escritura de configuración ha cambiado. Entonces hay un problema con esta configuración de enrutamiento y el error reportado es: "la exportación 'predeterminada' (importada como 'Enrutador') no se encontró en 'vue-router'

Solución: modificar la redacción.

import {
    
    createRouter, createWebHistory} from "vue-router";

import TTS from '@/views/tts/index.vue'  


export const constantRoutes = [
    {
    
                      
        path: '/tts',       
        name: 'TTS',   
        component: TTS   
    }
]

const router = createRouter({
    
    
    history: createWebHistory(),
    constantRoutes
})
 
export default router

Capítulo 3 No se pueden leer las propiedades de indefinido (se lee 'forEach')

at createRouterMatcher

Entorno: vue2.x, vue-router4.x
Descripción del problema:
Cannot read properties of undefined (reading 'forEach') at createRouterMatcher

Uncaught TypeError: Cannot read properties of undefined (reading 'forEach')
    at createRouterMatcher (vue-router.mjs:1498:1)
    at createRouter (vue-router.mjs:2957:1)
    at eval (index.js:19:1)
    at ./src/router/index.js (app.js:264:1)
    at __webpack_require__ (app.js:367:33)
    at fn (app.js:601:21)
    at eval (main.js:4:65)
    at ./src/main.js (app.js:253:1)
    at __webpack_require__ (app.js:367:33)
    at app.js:1489:109

Este foreach informa un error, lo que significa que un valor que ingresa al bucle es nulo. La razón de este problema puede ser que el nombre de mi ruta ConstantRoutes no coincide con las rutas oficiales. Para evitar que este problema vuelva a ocurrir, sigo usando rutas: xxx.

Demostración oficial:

// 1. 定义路由组件.
// 也可以从其他文件导入
const Home = {
    
     template: '<div>Home</div>' }
const About = {
    
     template: '<div>About</div>' }

// 2. 定义一些路由
// 每个路由都需要映射到一个组件。
// 我们后面再讨论嵌套路由。
const routes = [
  {
    
     path: '/', component: Home },
  {
    
     path: '/about', component: About },
]

// 3. 创建路由实例并传递 `routes` 配置
// 你可以在这里输入更多的配置，但我们在这里
// 暂时保持简单
const router = VueRouter.createRouter({
    
    
  // 4. 内部提供了 history 模式的实现。为了简单起见，我们在这里使用 hash 模式。
  history: VueRouter.createWebHashHistory(),
  routes, // `routes: routes` 的缩写
})

Solución
Agregue manualmente un atributo de rutas al definir el enrutador.

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