【Vue项目练习】router-link跳转失败原因

原创 已于 2022-11-15 11:10:44 修改 · 3.8k 阅读 · 6 ·
本内容遵循CC 4.0 BY-SA版权协议
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
标签
#vue.js #javascript #前端 #前端框架
于 2022-11-10 13:09:27 首次发布
本文分享了在Vue2项目中遇到的router-link路径参数传递问题，包括缺少冒号(:)和params参数的正确使用方法，帮助开发者快速定位并修复跳转失效的问题。

问题

今天在做Vue2项目的时候发现自己使用router-link想要传到/detail路径的时候需要带个params参数

总是跳转失败，自动跳转到我项目的首页

排查

  1. 检查router的js文件有没有引入路由组件

  2. 检查router的js文件有没有配置该路径

解决

  1. 发现<router-link>里面的to没有带 : ，导致后面的模板字符串失效

  2. 发现配置路由的时候，如果有params参数，而该参数在跳转时没有携带，跳转就失效了，解决方法是在该参数后面带个 ?

  3. 问题解决，跳转正常

router-link跳转失败（Vue router命名路由）
whtli的博客
01-21 8840
Vue router命名路由，router-link跳转失败解决方法
点击 router-link :to 没有跳转
weixin_64077152的博客
03-15 1173
检查：1、安装了 vue-router 的；2、该标签页面解析成功了的；3、去beforeEach里查看该方法执行了的，说明跳转的路由被拦截了。由于是项目迁移，菜单配置时点击跳转页面是实现了的，但是迁移到新项目里点击却没有跳转。
RouterLink设置路由跳转，页面地址已经更新但是页面没有跳转
weixin_48823116的博客
07-05 2788
RouterLink设置路由跳转，页面地址已经更新但是页面没有跳转
阻止router-link跳转的方式
IU
02-16 2905
【代码】阻止router-link跳转的方式。
vue配置路由，路由不跳转，页面不显示
热门推荐
qq_41988113的博客
04-26 1万+
问题1：路由不跳转 遇到这个问题第一时间去检查自己的代码 （1）在router index.js中 ①查看这两个routes是否一致 const routes:[ ... ] const router = new VueRouter({ routes, }) ②配置中的component是否多加了s { path: '/home', component: Home }, ③导入的文件路径是否正确 const Home = () => import('../vi
vue项目router-link在IE下不跳转，失效
贵林之恋的博客
07-05 2733
在IE11浏览器中，router-link的跳转是失效的，主要是因为当url的hash变化的时候，浏览器没有做出相应的反应。这时候需要做一个兼容处理，当浏览器是IE11时手动给url加一个hashChange事件。 办法一： new Vue({ el: '#app', router, components: { App }, template: '<App/>', ...
Vue ＜router-link＞标签绑定@click点击事件失败
JZevin的博客
04-16 5786
失败原因 router-link标签本身会阻止click事件，使用常规的@click绑定点击事件自然会失败。 解决方案 @click之后添加native修饰符。 <router-link to="/home" @click.native="changeRoute('home')"> 首页 </router-link> ...
Web自动化测试特殊场景实战：从异步加载到验证码的健壮解决方案
最新发布
weixin_42635064的博客
06-19 276
在软件测试领域，自动化测试是提升效率和覆盖率的基石，其核心原理是通过脚本模拟用户操作，验证软件功能与预期的一致性。然而，现代Web应用的技术复杂性为自动化带来了诸多挑战，其技术价值在于确保测试脚本在动态环境下的稳定性和可靠性。面对异步加载、动态内容、富交互前端框架等常见场景，以及验证码、文件上传、单页应用路由等特殊需求，测试工程师需要掌握智能等待策略、高级定位技巧和定制化解决方案。本文聚焦于Web自动化测试中的这些特殊场景，系统性地探讨了从概念理解到工程实践的全链路应对方案，旨在帮助测试开发者构建更健壮、更
vue使用 router-link 时点击不能跳转问题
weixin_30414635的博客
07-22 9929
本来一直都是使用<router-link to='/CouplePackage'>产品</router-link>这样的静态方法， 但是突然今天发现这个方法好像有点问题，在某些地方加了<router-link to='/CouplePackage'>产品</router-link>点击竟然没有反应了， 于是一直找问题，结果发现网上说可以...
Vue for循环后的router-link中的to不能被正常跳转
LeveBe的博客
09-20 2167
接着上一篇的内容，使用循环来完成router-link的生成，并可以实现界面的路由。 （1）HTML部分 <div v-for="(item, index) of list" :key="index" > <router-link :to="{ path: item.url }" tag="div" c...
vue router-link添加点击事件无效
HELLO WORLD
05-27 3391
本文知识点比较简单，只要面向新人解惑，vue高手请忽略。 在vue实际开发中可能会遇到比较常见的问题之一：router-link添加点击事件无效。 这是为什么呢？ 请看下文
vue-router router-link标签路由不跳转问题
朝花夕拾的博客
06-02 1万+
红色框内跳转没反应 改成绿色框这种格式 跳转成功
【Vue项目】router-link跳转失败404
z5675678的博客
02-09 2336
处理进行跳转且传值过去时，未成功跳转且报404找不到页面问题
router-link地址改变，但没有跳转
xh1506101064的博客
09-10 3176
情况：我的外部使用的是router-link跳转方式， 在router-link里面有this.$router.push跳转,结果就是地址栏上的参数改变了，但是，页面却没有跳转。， 解决方法，在router-view上加一个key 就可以跳转了
Vue 路由的使用及解决 router-link 点击事件无效问题
My_wife_QBL的博客
07-05 2195
在routes: [path: '/',},});Vue Router 是 Vue.js 官方的路由管理器，它提供了丰富的功能来构建单页面应用。通过定义路由、创建路由实例、挂载路由实例以及在模板中使用和，我们可以轻松实现页面导航和视图切换。在上添加点击事件时，可以使用.native修饰符监听原生点击事件，或者使用@click监听点击事件并调用阻止默认行为，然后手动执行路由跳转。希望本文能够帮助你全面理解 Vue Router 的使用方法，并解决在上添加点击事件无效的问题。
router-link不识别
weixin_42600128的博客
02-16 1033
router-link是Vue.js中的一个组件，它用于实现页面跳转和路由功能。如果你的代码中出现了“router-link不识别”的错误，可能是以下原因之一： 你没有正确引入Vue.js的router模块。在使用router-link之前，需要在代码中引入Vue.js的router模块，否则Vue.js无法识别router-link组件。 你的代码中存在拼写错误。请检查代码中是否有拼写错误，...
vue-router params无法传参的问题（路由传参）
h919685908的博客
09-09 3827
路由传参方式导致传参失败
vue router 中 router-link 不起作用的问题
chunyanquan1444的博客
02-27 6995
今天看了下 vue router 的文档，自己写了个小 demo，代码如下 <html> <head> <script src="https://unpkg.com/vue/dist/vue.js"></script> <...
router-link 点击事件失效
曹曹的博客
07-24 2955
router-link会阻止click事件（只用@click不用@click.native,事件是不会触发的) //以下addUserName点击函数无效 <router-link to="/Home" @click="addUserName">Go to the Home</router-link> 解决方法:将@click改为@click.native //...
vue路由的使用以及如何解决在router-link上添加点击事件无效的情况
Maximum_Patrick的博客
12-18 2123
vue路由的使用以及如何解决在router-link上添加点击事件无效的情况 一、vue路由的使用 首先要去npm商店下载安装vue-router，安装好之后新建router.js文件将vue-router引入 第二步，将所有你需要使用路由跳转的页面引入 第三步，使用路由 第四步，定义一个router将路径、名称、组件名存入 第五步，记得将路由导出，这样main.js中才能导入 最后，在main.js中进行导入，在对应页面就可以用router-link进行路由选择了 使用方法： 在对应页面使用r
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

chapitea

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值