vue2.x vue-router4.x路由报错问题

vue2.x、vue-router3.x 配置

router/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

main.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')

问题1 Unknown custom element: - did you register the component correctly? For recursive components, make sure to provide the “name” option.

请注意vue、router版本
使用vue2安装对应的router3版本
使用vue3安装对应的router4版本

问题2、3，vue2.x、vue-router4.x 的问题虽然可以解决，但是后期仍会有其他问题，还是直接切换版本，
比如： router-view \ router-link 无法使用

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

问题2 export ‘default’ (imported as ‘Router’) was not found in ‘vue-router’

环境： vue2.x、vue-router4.x
问题描述： export ‘default’ (imported as ‘Router’) was not found in ‘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)

原router.js

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是没问题的，可以正常使用，由于我使用的是vue-router4.x，配置写法都有所改变了。所以这个路由配置存在问题，导致报的错误是："export ‘default’ (imported as ‘Router’) was not found in ‘vue-router’

解决办法：修改写法

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

问题3 Cannot read properties of undefined (reading ‘forEach’)

at createRouterMatcher

环境： vue2.x、vue-router4.x
问题描述：
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

这个foreach报错，意味着有一个进入循环的值为null。出现此问题原因可能是我的路由constantRoutes与官方的routes命名不一致的原因，为了避免再次出现这种问题，还是使用routes: xxx这种写法。

官方给的demo：

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

// 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` 的缩写
})

解决办法
定义router时手动加上一个routes属性。

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