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

文章目录

  • vue2.x、vue-router3.x 配置
  • 问题1 Unknown custom element: - 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’
  • 问题3 Cannot read properties of undefined (reading 'forEach')

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
})

你可能感兴趣的:(Vue,vue.js,javascript,前端)