【报错】

Uncaught Error: 
[vue-router] route config "component" for path: /home cannot be a string id.
Use an actual component instead

运行时不报错,但是页面显示空白。打开控制台显示下图:

.

【报错解析】

路径/home的[vue router]route config“component”不能是字符串id 请改用实际的组件

在以下代码中定位,可以看到是组件的错误component

export default new Router({
routes: [
{
path:'/',
redirect:'/home'
},
{
path:'/home',
component:'Home'
},
{
path:'/cart',
component:'Cart'
},
{
path:'/profile',
component:'Profile'
}
]
})

发现  component:'Profile' 不能加引号

【解决方法】

去掉引号(component:Profile)后界面即可正常显示。

 

vue-router动态添加路由报错的更多相关文章

  1. Vue Router 常见问题(push报错、push重复路由刷新)

    Vue Router 常见问题 用于记录工作遇到的Vue Router bug及常用方案 router.push报错,Avoided redundant navigation to current l ...

  2. Vue页面权限控制和动态添加路由

    原文转自:点我 页面权限控制 页面权限控制是什么意思呢? 就是一个网站有不同的角色,比如管理员和普通用户,要求不同的角色能访问的页面是不一样的.如果一个页面,有角色越权访问,这时就得做出限制了. Vu ...

  3. vue动态添加路由,跳转页面时,页面报错路由重复:vue-router.esm.js?8c4f:16 [vue-router] Duplicate named routes definition: { name: "Login", path: "/login" }

    之前用了一个vue-element-admin做了一个小项目,里面用到了动态添加路由,动态展示侧边栏, 当我切换页面时,控制台总是警告提示路由重复,连续跳转几次页面后,控制台就被这些警告占满了, 于是 ...

  4. vue的动态路由(登录之后拿到动态路由通过addRouters()动态添加路由)

    登录后我们拿到路由动态路由,后端传的数据可能为这个 { path: '/index', meta: { title: '首页', icon: 'icon-shouye', tab_index: , / ...

  5. 【面试题】Vue2动态添加路由 router.addRoute()

    Vue2动态添加路由 点击打开视频讲解更加详细 场景: 一般结合VueX和localstorage一起使用 router.addRoutes vue-router4后 已废弃:使用 router.ad ...

  6. vue-element-admin登录逻辑,以及动态添加路由,显示侧边栏

    这段时间在研究element-admin,感觉这个库有许多值得学习的地方,我学习这个库的方法是,先看它的路由,顺着路由,摸清它的逻辑,有点像顺藤摸瓜. 这个库分的模块非常清晰,适合多人合作开发项目,但 ...

  7. vue-router 动态添加 路由

    动态添加路由可以用了做权限管理.登录后服务器端返回权限菜单,前端动态添加路由  然后在设置菜单 1.vue-router 有方法router.addRoutes(routes) 动态添加更多的路由规则 ...

  8. vue使用v-for时vscode报错 Elements in iteration expect to have 'v-bind:key' directives

    vue使用v-for时vscode报错 Elements in iteration expect to have 'v-bind:key' directives Vue 2.2.0+的版本里,当在组件 ...

  9. AS添加依赖报错Unable to merge dex

    AS添加依赖报错Unable to merge dex 最近在给项目添加依赖的时候,要给项目导入Bmob的SDK,参照Bmob的官方文档,可以直接在app的build.gradle文件中添加 //Bm ...

随机推荐

  1. linux下安装配置go语言环境

    1,golang中国下载go源码  http://www.golangtc.com/download  请对应系统版本号,linux-amd64.tar.gz为64位系统(推荐) ,linux-386 ...

  2. poll(2) 源码分析

    poll(2) poll(2) 系统调用的功能和 select(2) 类似:等待一个文件集合中的文件描述符就绪进行I/O操作. 使用 实现 select(2) 的局限性: 关注的文件描述符集合大小最大 ...

  3. 深入研究BufferedReader底层源码

    目录 1 概述 2 BufferedReader源码分析 3 意外发现 1 概述 最近研究JDK IO流这一块源码,发现真的比较简单,而且还有很多意外发现,如果大家对JDK源码感兴趣,不妨从IO流这一 ...

  4. Tomcat7.0.40注册到服务启动报错error Code 1 +connector attribute sslcertificateFile must be defined when using ssl with apr

    Tomcat7.0.40 注册到服务启动遇到以下几个问题: 1.启动报错errorCode1 查看日志如下图: 解决办法: 这个是因为我的jdk版本问题,因为电脑是64位,安装的jdk是32位的所以会 ...

  5. redis之spring应用

    前言 读本文之前,需要大家对redis有所了解,大家可以去看一下我之前分享的redis安装及简单使用这一随笔,而本文我将跟大家分享学习一下redis与spring的集成.当然,首先需要打开我们的red ...

  6. Flutter 的setState与FutureBuilder及EasyRefresh示例

    用setState改变状态 class CpwsList extends StatefulWidget { _CpwsListState createState() => _CpwsListSt ...

  7. requests模块(代理)篇

    - 用户验证 - 代理验证 #可能需要使用HTTP basic Auth, 可以这样 # 格式为 用户名:密码@代理地址:端口地址 proxy = { "http": " ...

  8. Flask的路由解读以及其配置

    from flask import Flask app =Flask(__name__) 一.配置 配置一共有四中方式 方法一: 只能设置以下两种属性 app.debug=True app.secre ...

  9. 【C语言笔记】#define与typedef的区别

    1.#define define是预处理指令,在编译时不进行任何检查,只进行简单的替换 宏定义的一般形式为: #define 宏名 字符串 这里所说的字符串是一般意义上的字符序列,不要和C语言中的字符 ...

  10. Powershell寻找域管在线服务器

    记录线下Powershell在域环境中对于服务器的信息收集 Powershell的脚本有很多,在内网渗透测试中不仅能扫,能爆,能转发,还能做更多的事情.我们常用的脚本有Powersploit,Empi ...