热门标签 | HotTags
当前位置:  开发笔记 > 编程语言 > 正文

vue使用

关键词:

router -link>:该标签是一个vue-router已经内置的组件,它会被渲染成一个标签

该标签会根据当前的路径,动态渲染出不同的组件

将路由器改为history模式, mode:'history'

=>a标签

渲染成任何属性

repalce :replace 不会留下history记录。所以指定repalce的情况下,后退键返回不能返回到上一个页面中。

this.$router.push('/home')

路由懒加载

const Home =()=>import('../components/Home.vue')

path:' /home/:id'

{{this.$route.params.id}}

url :协议://主机:端口/路径?查询(query)

传递参数主要有两种类型:params 和query

params的类型

配置路由格式:/router/:id

传递的方式:在path后面跟上对应的值

传递后形成的路径:/router/123,/router/abc

query的类型:

配置路由格式:/router,也就是普通配置

传递的方式:对象中使用query的key 作为传递方式

传递后形成的路径:/router?id=123,/router?id=abc

导航守卫的使用?

router.beforeEach(to,from,next)=》

{window.document.title = to.meta.title

}

keep-alive 是Vue内置的一个组件,可以使被包含的组件保留状态,

他有两个非常重要的属性

include:字符串式正则表达,只有匹配的组件会被缓存

exclude:任何匹配的组件都不会被缓存

box- shadow的使用


ue-router 路由重复点击 报错

2021.03.25 18:18:38字数 159阅读 1,290

报错如图

报错:
vue-router.esm.js?8c4f:2065 Uncaught (in promise) NavigationDuplicated: Avoided redundant navigation to current location: "/home".

通过$router.push()的方式跳转路由时,路由重复点击会报错,虽然不影响功能使用,但是总会有些不合适,强迫症很难受。


解决办法:

有两种解决办法:

1.在router的配置文件index.js中,加入如下代码:

//router/index.jsimport Router from "vue-router"const originalPush = Router.prototype.push
Router.prototype.push = function push(location) {return originalPush.call(this, location).catch(err => err)
}

2.在调用$router.push()时,后边接一个catch:

this.$router.push({}).catch(err => {})

除了push以外,replace也可以使用类似方式,这里就不列举了。

如果觉得有用就帮忙点个赞吧!


ue-router 路由重复点击 报错

报错如图

报错:
vue-router.esm.js?8c4f:2065 Uncaught (in promise) NavigationDuplicated: Avoided redundant navigation to current location: "/home".

通过$router.push()的方式跳转路由时,路由重复点击会报错,虽然不影响功能使用,但是总会有些不合适,强迫症很难受。


解决办法:

有两种解决办法:

1.在router的配置文件index.js中,加入如下代码:

//router/index.jsimport Router from "vue-router"const originalPush = Router.prototype.push
Router.prototype.push = function push(location) {return originalPush.call(this, location).catch(err => err)
}

2.在调用$router.push()时,后边接一个catch:

this.$router.push({}).catch(err => {})

除了push以外,replace也可以使用类似方式,这里就不列举了。

/* x偏移量 | y偏移量 | 阴影颜色 */
box-shadow: 60px -16px teal;/* x偏移量 | y偏移量 | 阴影模糊半径 | 阴影颜色 */
box-shadow: 10px 5px 5px black;/* x偏移量 | y偏移量 | 阴影模糊半径 | 阴影扩散半径 | 阴影颜色 */
box-shadow: 2px 2px 2px 1px rgba(0, 0, 0, 0.2);/* 插页(阴影向内) | x偏移量 | y偏移量 | 阴影颜色 */
box-shadow: inset 5em 1em gold;/* 任意数量的阴影,以逗号分隔 */
box-shadow: 3px 3px red, -1em 0 0.4em olive;/* 全局关键字 */
box-shadow: inherit;
box-shadow: initial;
box-shadow: unset;

new promise((resolve,reject) => {setTimeout(()=>{resolve()},1000)
}).then((
)=>{console.log("hello world");
})

一般情况下是有异步操作时,使用promise 对这个异步操作进行封装

new promise((resolve,reject) => {setTimeout(()=>{resolve("hello world")reject('error message')},1000)
}).then(data=>{},error => {})

//resolve, reject 接受成功或失败


推荐阅读
  • 单页面应用 VS 多页面应用的区别和适用场景
    本文主要介绍了单页面应用(SPA)和多页面应用(MPA)的区别和适用场景。单页面应用只有一个主页面,所有内容都包含在主页面中,页面切换快但需要做相关的调优;多页面应用有多个独立的页面,每个页面都要加载相关资源,页面切换慢但适用于对SEO要求较高的应用。文章还提到了两者在资源加载、过渡动画、路由模式和数据传递方面的差异。 ... [详细]
  • 图解redis的持久化存储机制RDB和AOF的原理和优缺点
    本文通过图解的方式介绍了redis的持久化存储机制RDB和AOF的原理和优缺点。RDB是将redis内存中的数据保存为快照文件,恢复速度较快但不支持拉链式快照。AOF是将操作日志保存到磁盘,实时存储数据但恢复速度较慢。文章详细分析了两种机制的优缺点,帮助读者更好地理解redis的持久化存储策略。 ... [详细]
  • C++字符字符串处理及字符集编码方案
    本文介绍了C++中字符字符串处理的问题,并详细解释了字符集编码方案,包括UNICODE、Windows apps采用的UTF-16编码、ASCII、SBCS和DBCS编码方案。同时说明了ANSI C标准和Windows中的字符/字符串数据类型实现。文章还提到了在编译时需要定义UNICODE宏以支持unicode编码,否则将使用windows code page编译。最后,给出了相关的头文件和数据类型定义。 ... [详细]
  • 图像因存在错误而无法显示 ... [详细]
  • 本文介绍了解决mysql 5.1启动问题的方法,通过修改my.ini文件中的相关配置,包括innodb_data_home_dir和skip-innodb等,可以解决启动问题。同时还介绍了如何调整内存池来存储metadata信息。 ... [详细]
  • Linux服务器密码过期策略、登录次数限制、私钥登录等配置方法
    本文介绍了在Linux服务器上进行密码过期策略、登录次数限制、私钥登录等配置的方法。通过修改配置文件中的参数,可以设置密码的有效期、最小间隔时间、最小长度,并在密码过期前进行提示。同时还介绍了如何进行公钥登录和修改默认账户用户名的操作。详细步骤和注意事项可参考本文内容。 ... [详细]
  • 在Android开发中,使用Picasso库可以实现对网络图片的等比例缩放。本文介绍了使用Picasso库进行图片缩放的方法,并提供了具体的代码实现。通过获取图片的宽高,计算目标宽度和高度,并创建新图实现等比例缩放。 ... [详细]
  • 本文介绍了Java工具类库Hutool,该工具包封装了对文件、流、加密解密、转码、正则、线程、XML等JDK方法的封装,并提供了各种Util工具类。同时,还介绍了Hutool的组件,包括动态代理、布隆过滤、缓存、定时任务等功能。该工具包可以简化Java代码,提高开发效率。 ... [详细]
  • 本文介绍了在mac环境下使用nginx配置nodejs代理服务器的步骤,包括安装nginx、创建目录和文件、配置代理的域名和日志记录等。 ... [详细]
  • 本文介绍了深入浅出Linux设备驱动编程的重要性,以及两种加载和删除Linux内核模块的方法。通过一个内核模块的例子,展示了模块的编译和加载过程,并讨论了模块对内核大小的控制。深入理解Linux设备驱动编程对于开发者来说非常重要。 ... [详细]
  • Gitlab接入公司内部单点登录的安装和配置教程
    本文介绍了如何将公司内部的Gitlab系统接入单点登录服务,并提供了安装和配置的详细教程。通过使用oauth2协议,将原有的各子系统的独立登录统一迁移至单点登录。文章包括Gitlab的安装环境、版本号、编辑配置文件的步骤,并解决了在迁移过程中可能遇到的问题。 ... [详细]
  • 本文详细介绍了使用C#实现Word模版打印的方案。包括添加COM引用、新建Word操作类、开启Word进程、加载模版文件等步骤。通过该方案可以实现C#对Word文档的打印功能。 ... [详细]
  • 本文介绍了使用readlink命令获取文件的完整路径的简单方法,并提供了一个示例命令来打印文件的完整路径。共有28种解决方案可供选择。 ... [详细]
  • 通过Anaconda安装tensorflow,并安装运行spyder编译器的完整教程
    本文提供了一个完整的教程,介绍了如何通过Anaconda安装tensorflow,并安装运行spyder编译器。文章详细介绍了安装Anaconda、创建tensorflow环境、安装GPU版本tensorflow、安装和运行Spyder编译器以及安装OpenCV等步骤。该教程适用于Windows 8操作系统,并提供了相关的网址供参考。通过本教程,读者可以轻松地安装和配置tensorflow环境,以及运行spyder编译器进行开发。 ... [详细]
  • 总结一下C中string的操作,来自〈CPrimer〉第四版。1.string对象的定义和初始化:strings1;空串strings2(s1);将s2初始 ... [详细]
author-avatar
望舒灬寒
这个家伙很懒,什么也没留下!
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有