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

原创已于 2022-11-15 11:10:44 修改 · 3.8k 阅读

6 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #javascript #前端 #前端框架

于 2022-11-10 13:09:27 首次发布

本文分享了在Vue2项目中遇到的router-link路径参数传递问题，包括缺少冒号(:)和params参数的正确使用方法，帮助开发者快速定位并修复跳转失效的问题。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

问题

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

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

排查

检查router的js文件有没有引入路由组件
检查router的js文件有没有配置该路径

解决

发现<router-link>里面的to没有带 : ，导致后面的模板字符串失效
发现配置路由的时候，如果有params参数，而该参数在跳转时没有携带，跳转就失效了，解决方法是在该参数后面带个 ?
问题解决，跳转正常

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

chapitea

关注关注

3
点赞
踩
6

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
打赏
打赏
打赏举报

举报

49. VUE router-link 标签的属性讲解和不通过router-link 实现路由跳转

Bi-Hu的博客

08-12

1285

1.tag 属性 router-link 这个标签如果我们不想让他渲染成 a标签，那么我们就可以 tag 属性，可以自定义渲染成自己想要的组件：可以发现 a 标签渲染成了按钮。 2.replace属性我们发现你点击了router-link 标签然后跳转切换视图的时候，他默认保留历史的即可以前进/后退，那么证明默认用的是 pushState ,我们如果不想让他可以前进、后退...

vue使用 router-link 时点击不能跳转问题

weixin_30414635的博客

07-22

9805

本来一直都是使用<router-link to='/CouplePackage'>产品</router-link>这样的静态方法，但是突然今天发现这个方法好像有点问题，在某些地方加了<router-link to='/CouplePackage'>产品</router-link>点击竟然没有反应了，于是一直找问题，结果发现网上说可以...

参与评论您还未登录，请先登录后发表或查看评论

点击 router-link :to 没有跳转

weixin_64077152的博客

03-15

1010

检查：1、安装了 vue-router 的；2、该标签页面解析成功了的；3、去beforeEach里查看该方法执行了的，说明跳转的路由被拦截了。由于是项目迁移，菜单配置时点击跳转页面是实现了的，但是迁移到新项目里点击却没有跳转。

router-link跳转失败（Vue router命名路由）

whtli的博客

01-21

8689

Vue router命名路由，router-link跳转失败解决方法

鸿蒙NEXT-HMRouter，在使用router后无法跳转问题解决

最新发布

m0_66451496的博客

06-14

620

【摘要】作者在使用HMRouter构建鸿蒙三层架构时，发现登录页跳转首页后HMRouter失效的问题。原代码在onVisibleAreaChange高频回调中执行跳转，导致路由异常。经分析，该错误源于页面未完全初始化时的生命周期冲突。解决方案是将跳转逻辑移至aboutToAppear生命周期回调中，确保页面完全初始化后再跳转。修改后，HMRouter可正常跳转其他页面，问题解决。（150字）

RouterLink设置路由跳转，页面地址已经更新但是页面没有跳转

weixin_48823116的博客

07-05

2673

RouterLink设置路由跳转，页面地址已经更新但是页面没有跳转

【Vue项目】router-link跳转失败404

z5675678的博客

02-09

2241

处理进行跳转且传值过去时，未成功跳转且报404找不到页面问题

router-link地址改变，但没有跳转

xh1506101064的博客

09-10

3130

情况：我的外部使用的是router-link跳转方式，在router-link里面有this.$router.push跳转,结果就是地址栏上的参数改变了，但是，页面却没有跳转。，解决方法，在router-view上加一个key 就可以跳转了

Vue 页面跳转不用router-link的实现代码

08-27

Vue 页面跳转不用 router-link 的实现代码本文主要介绍了 Vue 页面跳转不用 router-link 的实现代码，文中给大家介绍了 Vue router-link 跳转传值示例，需要的朋友可以参考下。首先， Vue router-link 是 Vue.js...

详谈vue中router-link和传统a链接的区别

10-15

总的来说，`<router-link>` 是Vue Router为单页应用设计的智能导航组件，它提供了更好的用户体验、模式兼容性和性能优化，而传统的`<a>` 标签则更适合于简单的页面间跳转。在开发Vue应用时，合理使用`<router-link>`...

详解vue-router 2.0 常用基础知识点之router-link

12-09

在Vue 2.0中，`router-link`组件是用于创建导航链接的关键元素，它与`router-view`配合使用，实现了单页面应用(SPA)的页面切换。首先，我们来看`$route.params`。这是一个对象，存储了动态路径参数和全匹配片段。...

router-link 点击事件失效

曹曹的博客

07-24

2893

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 点击事件无效问题

My_wife_QBL的博客

07-05

1819

在routes: [path: '/',},});Vue Router 是 Vue.js 官方的路由管理器，它提供了丰富的功能来构建单页面应用。通过定义路由、创建路由实例、挂载路由实例以及在模板中使用和，我们可以轻松实现页面导航和视图切换。在上添加点击事件时，可以使用.native修饰符监听原生点击事件，或者使用@click监听点击事件并调用阻止默认行为，然后手动执行路由跳转。希望本文能够帮助你全面理解 Vue Router 的使用方法，并解决在上添加点击事件无效的问题。

vue中 vue-router不跳转

TO_Web的博客

12-10

2717

router-view 点击不跳转路由配置 { path: '/', name: 'Navcation', component: () => import(/* webpackChunkName: "Navcation" */ '../components/Navcation') }, { path: '/survey', name: 'survey', component: () => import(/* webpackChunkNa

vue router-link添加点击事件无效

HELLO WORLD

05-27

3197

本文知识点比较简单，只要面向新人解惑，vue高手请忽略。在vue实际开发中可能会遇到比较常见的问题之一：router-link添加点击事件无效。这是为什么呢？请看下文

vue-router 路由嵌套显示不出来_搞懂VueRouter，看这篇文章就够了

weixin_39622628的博客

11-20

2193

关注Vue社区，回复“加群”加入我们一起学习，天天进步风不识途juejin.im/post/6857124868359061512Vue-Router认识路由1.什么是路由2.后端路由阶段3.前端路由阶段前端路由的规则1.URL的hash2.HTML5的history模式Vue-Router基础1.认识vue-router2.安装与使用vue-router3.路由组件详解路由配置其他补...

阻止router-link跳转的方式

02-16

2792

【代码】阻止router-link跳转的方式。

Vue2中注册在router-link上事件无效解决方法

Fairy_Yss的博客

09-25

792

今天用vue在做一个tab栏切换的时候，偶然发现我绑定在router-link上的click并不会触发，后来测试发现，所有绑定在router-link中的事件都不会触发此后查看了官方的文档，也并没有给出明确的说明：代码如下： <li > <router-link to="/one" @click="change('color1')" :c...

vue-router router-link标签路由不跳转问题