热门标签 | 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 接受成功或失败


推荐阅读
  • 小程序wxs中的时间格式化以及格式化时间和date时间互转
    本文介绍了在小程序wxs中进行时间格式化操作的问题,并提供了解决方法。同时还介绍了格式化时间和date时间的互相转换的方法。 ... [详细]
  • 基于layUI的图片上传前预览功能的2种实现方式
    本文介绍了基于layUI的图片上传前预览功能的两种实现方式:一种是使用blob+FileReader,另一种是使用layUI自带的参数。通过选择文件后点击文件名,在页面中间弹窗内预览图片。其中,layUI自带的参数实现了图片预览功能。该功能依赖于layUI的上传模块,并使用了blob和FileReader来读取本地文件并获取图像的base64编码。点击文件名时会执行See()函数。摘要长度为169字。 ... [详细]
  • HTML5网页模板怎么加百度统计?
    本文介绍了如何在HTML5网页模板中加入百度统计,并对模板文件、css样式表、js插件库等内容进行了说明。同时还解答了关于HTML5网页模板的使用方法、表单提交、域名和空间的问题,并介绍了如何使用Visual Studio 2010创建HTML5模板。此外,还提到了使用Jquery编写美好的HTML5前端框架模板的方法,以及制作企业HTML5网站模板和支持HTML5的CMS。 ... [详细]
  • 单页面应用 VS 多页面应用的区别和适用场景
    本文主要介绍了单页面应用(SPA)和多页面应用(MPA)的区别和适用场景。单页面应用只有一个主页面,所有内容都包含在主页面中,页面切换快但需要做相关的调优;多页面应用有多个独立的页面,每个页面都要加载相关资源,页面切换慢但适用于对SEO要求较高的应用。文章还提到了两者在资源加载、过渡动画、路由模式和数据传递方面的差异。 ... [详细]
  • loader资源模块加载器webpack资源模块加载webpack内部(内部loader)默认只会处理javascript文件,也就是说它会把打包过程中所有遇到的 ... [详细]
  • 本文介绍了lua语言中闭包的特性及其在模式匹配、日期处理、编译和模块化等方面的应用。lua中的闭包是严格遵循词法定界的第一类值,函数可以作为变量自由传递,也可以作为参数传递给其他函数。这些特性使得lua语言具有极大的灵活性,为程序开发带来了便利。 ... [详细]
  • PHP图片截取方法及应用实例
    本文介绍了使用PHP动态切割JPEG图片的方法,并提供了应用实例,包括截取视频图、提取文章内容中的图片地址、裁切图片等问题。详细介绍了相关的PHP函数和参数的使用,以及图片切割的具体步骤。同时,还提供了一些注意事项和优化建议。通过本文的学习,读者可以掌握PHP图片截取的技巧,实现自己的需求。 ... [详细]
  • 本文介绍了在Linux下安装Perl的步骤,并提供了一个简单的Perl程序示例。同时,还展示了运行该程序的结果。 ... [详细]
  • 分享2款网站程序源码/主题等后门检测工具
    本文介绍了2款用于检测网站程序源码和主题中是否存在后门的工具,分别是WebShellkiller和D盾_Web查杀。WebShellkiller是一款支持webshell和暗链扫描的工具,采用多重检测引擎和智能检测模型,能够更精准地检测出已知和未知的后门文件。D盾_Web查杀则使用自行研发的代码分析引擎,能够分析更为隐藏的WebShell后门行为。 ... [详细]
  • C++字符字符串处理及字符集编码方案
    本文介绍了C++中字符字符串处理的问题,并详细解释了字符集编码方案,包括UNICODE、Windows apps采用的UTF-16编码、ASCII、SBCS和DBCS编码方案。同时说明了ANSI C标准和Windows中的字符/字符串数据类型实现。文章还提到了在编译时需要定义UNICODE宏以支持unicode编码,否则将使用windows code page编译。最后,给出了相关的头文件和数据类型定义。 ... [详细]
  • 本文总结了在开发中使用gulp时的一些技巧,包括如何使用gulp.dest自动创建目录、如何使用gulp.src复制具名路径的文件以及保留文件夹路径的方法等。同时介绍了使用base选项和通配符来保留文件夹路径的技巧,并提到了解决带文件夹的复制问题的方法,即使用gulp-flatten插件。 ... [详细]
  • IjustinheritedsomewebpageswhichusesMooTools.IneverusedMooTools.NowIneedtoaddsomef ... [详细]
  • ECMA262规定typeof操作符的返回值和instanceof的使用方法
    本文介绍了ECMA262规定的typeof操作符对不同类型的变量的返回值,以及instanceof操作符的使用方法。同时还提到了在不同浏览器中对正则表达式应用typeof操作符的返回值的差异。 ... [详细]
  • Ihaveaworkfolderdirectory.我有一个工作文件夹目录。holderDir.glob(*)>holder[ProjectOne, ... [详细]
  • 总结一下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社区 版权所有