vue router-view 匹配路由后,第一次可以点击,再次点击同一个a标签不能再次点击,如何处理?

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了vue router-view 匹配路由后,第一次可以点击,再次点击同一个a标签不能再次点击,如何处理?相关的知识,希望对你有一定的参考价值。

激活后的a标签有这个class router-link-exact-active router-link-active,求大神帮忙,谢谢

可能是因为data函没加return导致的。如下

修改前

修改后

成功解决,也怪自己太粗心了

参考技术A @click.native="" 事件后加上修饰符

vue路由改变了数据和内容不变的解决办法

参考技术A 场景:
1.路由改变了但是数据和内容没变,刷新后才变化
2.动态路由/cate/:id/index.html类似这样只改变id号的场景,由于router-view是复用的,单纯的改变id号并不会刷新router-view

解决办法有两种:【1】【2】

router-view组件复用与否的几种常见情况:
(1)不设置 router-view 的 key 属性
由于 Vue 会复用相同组件, 即 /page/1 跳转到 /page/2 或者 /page?id=1 跳转到 /page?id=2 这类链接跳转时, 将不在执行created, mounted之类的钩子, 只有beforeRouteUpdate钩子
(2)设置<router-view :key ="$route.path">
从/page/1 跳转到 /page/2, 由于这两个路由的$route.path不一样, 所以组件被强制不复用, 相关钩子加载顺序为:
beforeRouteUpdate => created => mounted
从/page?id=1跳转到 /page?id=2, 由于这两个路由的$route.path一样都是/page, 所以和没设置 key 属性一样, 会复用组件, 相关钩子加载顺序为:
beforeRouteUpdate
(3)设置<router-view :key ="$route.fullPath">
从/page/1跳转到/page/2, 由于这两个路由的$route.fullPath不一样, 所以组件被强制不复用, 相关钩子加载顺序为:
beforeRouteUpdate => created => mounted
从/page?id=1跳转到/page?id=2, 由于这两个路由的$route.fullPath也不一样, 所以组件被强制不复用, 相关钩子加载顺序为:
beforeRouteUpdate => created => mounted

以上是关于vue router-view 匹配路由后,第一次可以点击,再次点击同一个a标签不能再次点击,如何处理?的主要内容,如果未能解决你的问题,请参考以下文章

Vue路由

嵌套路由

Vue零散知识点

vue嵌套路由

Vue路由进阶

vue-router总结