vue-router动态添加路由报错
【报错】
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动态添加路由报错的更多相关文章
- Vue Router 常见问题(push报错、push重复路由刷新)
Vue Router 常见问题 用于记录工作遇到的Vue Router bug及常用方案 router.push报错,Avoided redundant navigation to current l ...
- Vue页面权限控制和动态添加路由
原文转自:点我 页面权限控制 页面权限控制是什么意思呢? 就是一个网站有不同的角色,比如管理员和普通用户,要求不同的角色能访问的页面是不一样的.如果一个页面,有角色越权访问,这时就得做出限制了. Vu ...
- vue动态添加路由,跳转页面时,页面报错路由重复:vue-router.esm.js?8c4f:16 [vue-router] Duplicate named routes definition: { name: "Login", path: "/login" }
之前用了一个vue-element-admin做了一个小项目,里面用到了动态添加路由,动态展示侧边栏, 当我切换页面时,控制台总是警告提示路由重复,连续跳转几次页面后,控制台就被这些警告占满了, 于是 ...
- vue的动态路由(登录之后拿到动态路由通过addRouters()动态添加路由)
登录后我们拿到路由动态路由,后端传的数据可能为这个 { path: '/index', meta: { title: '首页', icon: 'icon-shouye', tab_index: , / ...
- 【面试题】Vue2动态添加路由 router.addRoute()
Vue2动态添加路由 点击打开视频讲解更加详细 场景: 一般结合VueX和localstorage一起使用 router.addRoutes vue-router4后 已废弃:使用 router.ad ...
- vue-element-admin登录逻辑,以及动态添加路由,显示侧边栏
这段时间在研究element-admin,感觉这个库有许多值得学习的地方,我学习这个库的方法是,先看它的路由,顺着路由,摸清它的逻辑,有点像顺藤摸瓜. 这个库分的模块非常清晰,适合多人合作开发项目,但 ...
- vue-router 动态添加 路由
动态添加路由可以用了做权限管理.登录后服务器端返回权限菜单,前端动态添加路由 然后在设置菜单 1.vue-router 有方法router.addRoutes(routes) 动态添加更多的路由规则 ...
- 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+的版本里,当在组件 ...
- AS添加依赖报错Unable to merge dex
AS添加依赖报错Unable to merge dex 最近在给项目添加依赖的时候,要给项目导入Bmob的SDK,参照Bmob的官方文档,可以直接在app的build.gradle文件中添加 //Bm ...
随机推荐
- win10安装python
下载地址:https://www.python.org/downloads/release/python-365/ 安装完成后,在cmd里输入 python ,检查是否安装成功
- 【Java】访问mysql数据库视图
数据库连接Connect: package cn.hkwl.zaxq.mysql; import java.sql.Connection; import java.sql.DriverManager; ...
- SQL SERVER 数据库中查看文本字段中的数据长度LEN() 函数的使用方法
SQL LEN() 语法 SELECT LEN(column_name) FROM table_name Id LastName FirstName Address City 1 Adams John ...
- web前端Vue+Django rest framework 框架 生鲜电商项目实战视频教程 ☝☝☝
web前端Vue+Django rest framework 框架 生鲜电商项目实战视频教程 web前端Vue+Django rest framework 框架 生鲜电商项目实战视频教程 学习 ...
- Java序列化总结(最全)
概念 实现 Serializable 接口, 它只是一个标记接口,不实现也能够进行序列化 RMI: 远程方法调用 RPC: 远程过程调用 序列化ID 解决了序列化与反序列出现代码不一致的问题, 不一致 ...
- AlexNet网络
AlexNet 中包含了比较新的技术点,首次在CNN中成功应用了 ReLu .Dropout和LRN等Trick. 1.成功使用了Relu作为CNN的激活函数,并验证其效果在较深的网络中超过了Sigm ...
- jQuery v1.10.2如何判断checkbox(复选框)是否被选中
做项目时,我们经常会用到jquery来做一些判断,今天自己遇上判断复选框是否选中,然后搜索查看,发现现在网上的都是错误的,下面罗列错误的: 1.$("#id").attr(&quo ...
- Ubuntu 查看已安装软件
apt list --installed dpkg -l
- 存储物理页属性的PFN数据库
Windows内核分析索引目录:https://www.cnblogs.com/onetrainee/p/11675224.html 存储物理页属性的PFN数据库 一.PFN的基础概念 页帧:即CPU ...
- 【Spring Cloud】服务注册与发现组件——Eureka(二)
一.Eureka原理 1.架构图 首先来看eureka的官方结构图 所有应用作为Eureka Client和Eureka Server交互,服务提供者启动时向Eureka Server注册自己的IP. ...