vue-router 采坑记录

一、错误：Uncaught Error: [vue-router] route config "component" for path: /detail cannot be a string id. Use an actual component instead.

解决方案：路由配置中

import Detail from './components/detail.vue';

const routers = [
......
   {
       path:'/detail',
       name:'detail',
       component:'Detail' //这里是组件名称,不能加引号！！！！去掉引号，问题解决。
   },

......
]

二、警告：vue-router.esm.js?8c4f:16 [vue-router] Route with name 'detail' does not exist

解决方案：

const router = new VueRouter({
mode: 'history',
routes//即routes:routes的简写形式----注意这里，是routes，必须是routes，这是一个固定的属性。
})

三、错误：vue-router.esm.js?8c4f:2065 Uncaught (in promise) NavigationDuplicated: Avoided redundant navigation to current location:

解决方案：重写push方法,加上catch处理,防止报错

const originalPush = VueRouter.prototype.push
VueRouter.prototype.push = function push(location) {
return originalPush.call(this, location).catch(err => err)
}

四、动态参数问题：连接上带着参数和不带参数的配置

URL上带参：

{
path: '/:msg',//params传参,设置动态参数,链接上会有这个参数
name:'home',
component: Home
},

URL上不带参：

{
       path: '/',params传参,没有设置动态参数,链接上不会有这个参数,刷新页面参数丢失
         name:'home',
       component: Home
   }

四、[Vue warn]: Extraneous non-props attributes (class) were passed to component but could not be
automatically inherited because component renders fragment or text root nodes.
at <Users class="dash-ht" onVnodeUnmounted=fn<onVnodeUnmounted> ref=Ref< undefined > >
at <RouterView class="dash-ht" > at <App>

[Vue warn]: Extraneous non-props attributes (class) were passed to component but could not be
automatically inherited because component renders fragment or text root nodes. at <Users class="dash-ht" onVnodeUnmounted=fn<onVnodeUnmounted> ref=Ref< undefined > > at <RouterView class="dash-ht" > at <App>

这个错误是在vue文件中的<template></template>标签中有多个根元素造成的,比如

<template><div>这是第一个根元素</div><div>这是第二个根元素</div>
</template>

解决办法就是用一个div包裹这两个div

<template><div>这个才是根元素,把下面两个包裹起来<div>这是第一个根元素</div><div>这是第二个根元素</div></div>
</template>

vue-router 采坑记录相关推荐

iOS 微信SDK1.8.6后需要UniversalLink解决方案及采坑记录
项目最初因审核原因,一直使用iOS原生分享, 最近因项目需求要求, 接入微信分享, 以为和原来的没有区别, 但是接入时才发现改动的地方还是挺多的, 主要是需要配置UniversalLink和提包时的一 ...
H5拍照、预览、压缩、上传采坑记录
H5拍照.预览.压缩.上传采坑记录公司项目前段时间需要实现手机拍照上传的功能,本来以为用createObjectURL和canvas可以很轻松的实现,结果发现问题多多,特此记录下来. DEMO预览( ...
mysql8.0.19.0_分享MySql8.0.19 安装采坑记录
上篇文章给大家介绍了MySql8.0.19 安装过程,需要的朋友可以点击查看.https://www.jb51.net/article/178988.htm 1.ERROR 1820 (HY000): ...
mysql8.0依赖_分享MySql8.0.19 安装采坑记录
上篇文章给大家介绍了MySql8.0.19 安装过程,需要的朋友可以点击查看.https://www.jb51.net/article/178988.htm 1.ERROR 1820 (HY000): ...
Ubuntu18安装微信(deepin-wine版本)完整过程以及采坑记录
Ubuntu18安装微信(deepin-wine版本)完整过程以及采坑记录(亲测运行) git clone https://gitee.com/wszqkzqk/deepin-wine-for-ubu ...
Centos7.9上利用cephadm安装Ceph Octopus 15.2的采坑记录，附带K8S挂载方法
Centos7.9上利用cephadm安装Ceph Octopus 15.2的采坑记录,附带K8S挂载方法 0.亮点 1 准备 1.1 修改历史记录 1.2 升级系统内核 1.3 配置免密登录问题1 ...
Linux MySQL数据库冷迁移采坑记录
Linux MySQL数据库冷迁移采坑记录当前文件系统已满,需要将MySQL默认路径迁移到新文件系统下. MySQL数据库文件原位置:/var/lib/mysql . 要移动至:/mysql/mys ...
【SpringBoot DB系列】Jooq批量写入采坑记录
[SpringBoot DB系列]Jooq批量写入采坑记录前面介绍了jooq的三种批量插入方式,结果最近发现这里面居然还有一个深坑,我以为的批量插入居然不是一次插入多条数据,而是一条一条的插入-,这 ...
php给微信公众号接入聊天机器人程序+采坑记录
php给微信公众号接入聊天机器人程序今天逛了下我的公众号,突然心血来潮,想添加个自动聊天功能,于是-动手-!! 主要用到的api: 图灵机器人api 青云客智能聊天机器人API 茉莉机器人API 至 ...
微信支付采坑记录（java后端一：微信支付调用从哪一步开始）
普通商户模式微信支付之APP支付统一下单: 前言: 最近项目开发到微信支付的模块,经过一周的不懈努力,虽然微信支付流程跑通了,但当时的那些坑是真的烦,为了避免自己以后犯同样的错误,当然还有各位新接触微 ...

vue-router 采坑记录

vue-router 采坑记录相关推荐

最新文章

热门文章