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 ...
随机推荐
- asp.net core过滤器记录响应对象
百度到的基本上就是读取response.body的流.然后记录完了之后,把流的index重新复位,这样也太麻烦了. 其实asp.net core团队肯定已经考虑到了这种需求,比如记录请求响应日志.给响 ...
- github项目上传管理
一.完成项目后再在github上面新建仓库然后上传代码文件 1.创建仓库时不初始化README.md文件 touch README.md //此行可忽略 git init //初始化仓库 git ad ...
- iptables详解之filter
iptables详解之filter iptables令很多小伙伴脑阔疼,下面我们来说说如何使用iptables. 一.iptables格式 1.1.iptables 帮助 通过iptables --h ...
- SVM面试知识点总结
1. SVM 原理 SVM 是一种二类分类模型.它的基本思想是在特征空间中寻找间隔最大的分离超平面使数据得到高效的二分类,具体来讲,有三种情况(不加核函数的话就是个线性模型,加了之后才会升级为一个非线 ...
- 用 Sphinx 搭建博客时,如何自定义插件?
之前有不少同学看过我的个人博客(http://python-online.cn),也根据我写的教程完成了自己个人站点的搭建. 点此:使用 Python 30分钟 教你快速搭建一个博客 为防有的同学不清 ...
- 洛谷P3258 [JLOI2014]松鼠的新家【LCA+树上差分】
简要题意 树上n个节点,给定路径,求每个点经过次数 题意分析 对于每两个点,有两种情况,第一种,他们的lca为本身,第二种,他们有公共祖先,又要求他们的点经过次数,暴力是不可能的,复杂度不对,所以可以 ...
- HDU 6607 Time To Get Up(状态压缩+枚举)
题目网址: http://acm.hdu.edu.cn/showproblem.php?pid=6077 思路: 先预处理一下,将每个数字块的“X”看作1,“.”看作0,进行状态压缩转换成二进制数,用 ...
- photometric_stereo halcon光度立体法三维表面重建
官方文档翻译 名称: photometric_stereo -- 通过光度立体技术重建表面. 签名: photometric_stereo(Images : HeightField, Gradient ...
- windows下cmd组合命令和管道命令
组合命令:&& 管道命令:|
- alinode与node性能测试方法与分析
需求和技术指标整理 node服务在引入node性能监控过程中,需要使用alinode,为了对alinode与官方node各项性能指标的差异有进一步的认识,现开展以下调研.测试. 原理性分析 alino ...