vue2路由中router-view不显示的原因及踩坑记录

更新时间：2022年04月28日 09:38:37 作者：前端小白QAQ

这篇文章主要介绍了vue2路由中router-view不显示的原因及踩坑记录，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教

vue2路由router-view不显示

由于平常都是复制粘贴，对于变量的命名并没有太大的规范，在加上看官方文档并没与什么说明变量名必须为routes，所以出现了这个原因，不多说上代码

在代码中const声明的变量名必须为routes，千万不能写成别的，笔者就写了一手routers，导致router-view标签不渲染，结果浪费了一个小时排查错误。

import Vue from 'vue'
import VueRouter from 'vue-router'
import Home from '@/views/home'
Vue.use(VueRouter)
const routes = [
  {
    path: '/',
    name: 'Home',
    component: Home,
    redirect: '/index',
    children: [
      {
        path: 'index',
        name: 'index',
        component: () => import('@/views/index.vue')
      }
    ]
  }
]
const router = new VueRouter({
  routes
})
export default router

vue vue-router的神坑

router-view不显示

必须是routes 且是个对象

以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。

您可能感兴趣的文章:

Vue3+TypeScript实现递归菜单组件的完整实例
Vue.js中的递归组件是一个可以调用自己的组件,递归组件一般用于博客上显示评论,形菜单或者嵌套菜单,文章主要给大家介绍了关于Vue3+TypeScript实现递归菜单组件的相关资料,需要的朋友可以参考下
2021-08-08
webstorm和.vue中es6语法报错的解决方法
本篇文章主要介绍了webstorm和.vue中es6语法报错的解决方法，小编总结了webstorm和.vue中出现的es6语法报错，避免大家采坑，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2018-05-05
基于Vue+ELement搭建动态树与数据表格实现分页模糊查询实战全过程
这篇文章主要给大家介绍了关于如何基于Vue+ELement搭建动态树与数据表格实现分页模糊查询的相关资料,Vue Element UI提供了el-pagination组件来实现表格数据的分页功能,需要的朋友可以参考下
2023-10-10
Vue3 KeepAlive实现原理解析
KeepAlive 是一个内置组件，那封装一个组件对于大家来说应该不会有太大的困难，它的核心逻辑在于它的 render 函数，它用 map 去记录要缓存的组件，就是 [key，vnode] 的形式，这篇文章主要介绍了Vue3 KeepAlive实现原理,需要的朋友可以参考下
2022-09-09
Vue.js框架路由使用方法实例详解
这篇文章主要介绍了Vue.js框架路由使用方法实例详解的相关资料,这里提供实例帮助大家学习理解这部分内容，需要的朋友可以参考下
2017-08-08
vue3实现移动端滑动模块
这篇文章主要为大家详细介绍了vue3实现移动端滑动模块，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2022-09-09
Vue3中父子传参常见方式及用法
在 Vue 3 中，父子组件之间进行通信有多种方式，下面简单介绍下常见的方式及其用法和使用场景，本文通过实例代码给大家介绍的非常详细，需要的朋友参考下吧
2024-01-01
Vue+scss白天和夜间模式切换功能的实现方法
这篇文章主要介绍了Vue+scss白天和夜间模式切换功能的实现方法,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2021-01-01
深入理解vue.js双向绑定的实现原理
vue.js是MVVM结构的，同类的还有AngularJs；至于MVC、MVP、MVVM的比较网上已经有很多了，这样不再重复。这篇文章将给大家深入的介绍vue.js双向绑定的实现原理，有需要的朋友们可以参考借鉴，下面跟着小编一起来看看吧。
2016-12-12
vue 项目中实现按钮防抖方法
这篇文章主要介绍了vue 项目中实现按钮防抖方法,首先需要新建 .js文件存放防抖方法，引入防抖文件,methods中添加方法，本文结合示例代码给大家介绍的非常详细，需要的朋友可以参考下
2022-12-12