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


推荐阅读
  • 本文详细介绍了中央电视台电影频道的节目预告,并通过专业工具分析了其加载方式,确保用户能够获取最准确的电视节目信息。 ... [详细]
  • 本文介绍如何使用 Angular 6 的 HttpClient 模块来获取 HTTP 响应头,包括代码示例和常见问题的解决方案。 ... [详细]
  • 前言--页数多了以后需要指定到某一页(只做了功能,样式没有细调)html ... [详细]
  • 本文探讨了 Objective-C 中的一些重要语法特性,包括 goto 语句、块(block)的使用、访问修饰符以及属性管理等。通过实例代码和详细解释,帮助开发者更好地理解和应用这些特性。 ... [详细]
  • 题目Link题目学习link1题目学习link2题目学习link3%%%受益匪浅!-----&# ... [详细]
  • 在 ExtJS 中,类的别名(alias)是开发过程中非常有用的一个特性。通过别名,开发者可以使用简短且易于记忆的名称来引用复杂的类名。本文将详细探讨如何在 ExtJS API 中使用和定义别名,并提供实例说明。 ... [详细]
  • VSCode与Gitee集成:项目提交的高效实践
    本文介绍如何利用VSCode内置的Git工具将项目提交到Gitee,简化Git命令的使用,提升代码管理效率。同时分享一些常见的踩坑经验和解决方案。 ... [详细]
  • MySQL索引详解与优化
    本文深入探讨了MySQL中的索引机制,包括索引的基本概念、优势与劣势、分类及其实现原理,并详细介绍了索引的使用场景和优化技巧。通过具体示例,帮助读者更好地理解和应用索引以提升数据库性能。 ... [详细]
  • PHP中去除换行符的多种方法及应用场景
    本文将详细介绍在PHP中去除换行符的各种方法,并结合实际应用场景进行说明。通过本文,您将了解如何根据不同操作系统的特点,选择最合适的换行符处理方式。 ... [详细]
  • 最近团队在部署DLP,作为一个技术人员对于黑盒看不到的地方还是充满了好奇心。多次咨询乙方人员DLP的算法原理是什么,他们都以商业秘密为由避而不谈,不得已只能自己查资料学习,于是有了下面的浅见。身为甲方,虽然不需要开发DLP产品,但是也有必要弄明白DLP基本的原理。俗话说工欲善其事必先利其器,只有在懂这个工具的原理之后才能更加灵活地使用这个工具,即使出现意外情况也能快速排错,越接近底层,越接近真相。根据DLP的实际用途,本文将DLP检测分为2部分,泄露关键字检测和近似重复文档检测。 ... [详细]
  • 本题探讨如何通过最大流算法解决农场排水系统的设计问题。题目要求计算从水源点到汇合点的最大水流速率,使用经典的EK(Edmonds-Karp)和Dinic算法进行求解。 ... [详细]
  • 本次考试于2016年10月25日上午7:50至11:15举行,主要涉及数学专题,特别是斐波那契数列的性质及其在编程中的应用。本文将详细解析考试中的题目,并提供解题思路和代码实现。 ... [详细]
  • 本文深入探讨了POJ2762问题,旨在通过强连通分量缩点和单向连通性的判断方法,解决有向图中任意两点之间的可达性问题。文章详细介绍了算法原理、实现步骤,并附带完整的代码示例。 ... [详细]
  • 解决FCKeditor应用主题后上传问题及优化配置
    本文介绍了在Freetextbox收费后选择FCKeditor作为替代方案时遇到的上传问题及其解决方案。通过调整配置文件和调试工具,最终解决了上传失败的问题,并对相关配置进行了优化。 ... [详细]
  • 本题来自WC2014,题目编号为BZOJ3435、洛谷P3920和UOJ55。该问题描述了一棵不断生长的带权树及其节点上小精灵之间的友谊关系,要求实时计算每次新增节点后树上所有可能的朋友对数。 ... [详细]
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社区 版权所有