关于vue-cli4.5.13中使用vue-router报错的问题。

以下是报错详情:

vue-router.esm-bundler.js?6c02:1474 Uncaught TypeError: Cannot read property 'forEach' of undefined
    at createRouterMatcher (vue-router.esm-bundler.js?6c02:1474)
    at new createRouter (vue-router.esm-bundler.js?6c02:2777)
    at eval (index.js?a18c:41)
    at Module../src/router/index.js (app.js:1482)
    at __webpack_require__ (app.js:854)
    at fn (app.js:151)
    at eval (main.js:12)
    at Module../src/main.js (app.js:1470)
    at __webpack_require__ (app.js:854)
    at fn (app.js:151)

先附上自己的router/index.js代码:

import { createRouter, createWebHistory } from 'vue-router'

const Home = ()=>import('views/home/Home')
const Category = ()=>import('views/category/Category')
const Cart = ()=>import('views/cart/Cart')
const Profile = ()=>import('views/profile/Profile')

const routers = [
  {
    path:'',
    redirect:'/home'
  },
  {
    path:'/home',
    component:Home
  },
  {
    path:'/category',
    component:Category
  },
  {
    path:'/cart',
    component:Cart
  },
  {
    path:'/profile',
    component:Profile
  }
]
const router = new createRouter({
  history:createWebHistory(),
  routers
})

export default router

百度了好多,发现都无济于事。于是自己寻找了半天发现在定义route数组的时候,把routes写成了routers。又因为在createRouter函数里面使用了简易写法,所以导致在参数里面找不到routes导致的报错。

下面附正确代码:

import { createRouter, createWebHistory } from 'vue-router'

// 懒加载
const Home = ()=>import('views/home/Home')
const Category = ()=>import('views/category/Category')
const Cart = ()=>import('views/cart/Cart')
const Profile = ()=>import('views/profile/Profile')

// 2.创建router
const routes = [
  {
    path:'',
    redirect:'/home'
  },
  {
    path:'/home',
    component:Home
  },
  {
    path:'/category',
    component:Category
  },
  {
    path:'/cart',
    component:Cart
  },
  {
    path:'/profile',
    component:Profile
  }
]

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

export default router

希望以后不要犯这种低级错误了

Logo

前往低代码交流专区

更多推荐