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 ...
随机推荐
- ThoughtWorks 面试三连挂,以后再也不去了
先说我吧,之前在外企呆过两年,那时Team的很多同事都去了ThoughtWorks,所以有一种情怀,只要有机会我就去面试...之前在Team里对我的评价也很高(不是我说的),现在也是公司的技术总监,总 ...
- 重构网页过程中的小tips
1.display为inline-block的元素可以使用virtical-align:middle来使得元素垂直居中对齐 2.在一些按钮标签或者mark标签中,如果文本内容确定不会改变长度的话,可以 ...
- Flask中的CBV以及正则表达式
Flask中的CBV以及正则表达式 一.CBV def auth(func): def inner(*args, **kwargs): print('before') result = func(*a ...
- API---注册表编程
首先来认识一下键,项,值吧: 左边有五个根键: HKEY_CLASSES_ROOT HKEY_CURRENT_USER HKEY_LOCAL_MACHINE HKEY_USER HKEY_CURREN ...
- AWD攻防工具脚本汇总(一)
最近工作很忙 今天抽空准备下AWD比赛得攻防工具和脚本 以下只是常用 希望下周不被吊锤~~ 后续整理后想抽空写成一个攻击框架汇总放github~~ 这里从各种情景和需求中去总结工具和脚本的使用 情 ...
- 爬虫1:html页面+beautifulsoap模块+get方式+demo
前言:最近公司要求编写一个爬虫,需要完善后续金融项目的数据,由于工作隐私,就不付被爬的网址url了,下面总结下spider的工作原理. 语言:python:工具:jupyter: 概要:说到爬虫 ...
- PHP reset
1.函数的作用:重置数组内部指针,并返回第一个元素 2.函数的参数: @param array $array 3. 例子一: <?php $arr1 = []; $arr2 = [false, ...
- [USACO09JAN]安全出行Safe Travel 最短路,并查集
题目描述 Gremlins have infested the farm. These nasty, ugly fairy-like creatures thwart the cows as each ...
- 真——Springcloud支持Https
很久不写了,因为一直没有一个项目的需求推动,担心写的东西可能不是太实际.其间学习的事倒是做了不少,设计模式.领域开发.Antlr.kubernetes等等,其实大部分都记在纸质笔记上了.. 基于对新技 ...
- opencv::凸包-Convex Hull
概念介绍 什么是凸包(Convex Hull),在一个多变形边缘或者内部任意两个点的连线都包含在多边形边界或者内部. 正式定义:包含点集合S中所有点的最小凸多边形称为凸包 Graham扫描算法 首先选 ...