Vue.js 路由不生效(报错)

作者: Chuwen

时间: 2021-01-21

# 报如下错误
`TypeError: Cannot read property '$createElement' of undefined at render ...`
```log
vue-router.esm.js?8c4f:2257 TypeError: Cannot read property '$createElement' of undefined
    at render (eval at ./node_modules/cache-loader/dist/cjs.js?{"cacheDirectory":"node_modules/.cache/vue-loader","cacheIdentifier":"f01fdf16-vue-loader-template"}!./node_modules/vue-loader/lib/loaders/templateLoader.js?!./node_modules/cache-loader/dist/cjs.js?!./node_modules/vue-loader/lib/index.js?!./src/components/Login.vue?vue&type=template&id=ef68022e&scoped=true& (app.js:974), <anonymous>:6:16)
    at eval (vue-router.esm.js?8c4f:2087)
    at eval (vue-router.esm.js?8c4f:2114)
    at Array.map (<anonymous>)
    at eval (vue-router.esm.js?8c4f:2114)
    at Array.map (<anonymous>)
    at flatMapComponents (vue-router.esm.js?8c4f:2113)
    at eval (vue-router.esm.js?8c4f:2049)
    at iterator (vue-router.esm.js?8c4f:2300)
    at step (vue-router.esm.js?8c4f:1947)
```

# 原因及解决方案
可能较依赖编辑器自动补全，导致将路由的配置项 `component` 写成了 `components`

## 解决前代码
```javascript
import Vue from 'vue'
import VueRouter from 'vue-router'
import Login from '@/components/Login'

Vue.use(VueRouter)

const routes = [
  {
    path: '/',
    redirect: '/login'// 重定向指定页面
  },
  {
    path: '/login',
    name: 'login',
    components: Login
  }
]

const router = new VueRouter({
  mode: 'history',
  routes
})

export default router
```

## 解决后代码
```javascript
import Vue from 'vue'
import VueRouter from 'vue-router'
import Login from '@/components/Login'

Vue.use(VueRouter)

const routes = [
  {
    path: '/',
    redirect: '/login'// 重定向指定页面
  },
  {
    path: '/login',
    name: 'login',
    component: Login// ！！！修改了此处！！！
  }
]

const router = new VueRouter({
  mode: 'history',
  routes
})

export default router
```

Vue.js 路由不生效(报错)

添加新评论

最新文章

最近回复

分类

归档

其它