vue router动态路由点击跳转路径地址重复追加

最新推荐文章于 2025-02-08 00:15:00 发布

原创最新推荐文章于 2025-02-08 00:15:00 发布 · 4.3k 阅读

3 ·

本内容遵循CC 4.0 BY-SA版权协议

收录于

vue学习

当前文章被收录于：

vue学习

6 篇文章 0 人学习

订阅专栏查看详情

当前文章被以下社区和专栏收录：

本文解决了一个在使用VueRouter动态路由时遇到的问题：点击多次导致地址栏中路由不断重复。通过在页面中相对路径前添加‘/’解决了此问题。

在练习写vue router动态路由时碰到的问题。点击多次时，地址栏不断增加重复。在这里插入图片描述
查看代码发现是页面中相对路径最前面少了 ‘ / ’；添加上就能正常显示了。如下：

标签

#vue.js

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

空空的瓶子酱

关注关注

4
点赞
踩
3

收藏

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

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

专栏目录

Vue-router 使用嵌套路由出现地址重叠问题解决方案

m0_64547949的博客

02-21

1799

使用Vue-router的子路由的时候，跳转的时候会出现路由地址重复,

边缘AI摄像头：从感知到联动，驱动智慧城市实时决策

最新发布

weixin_30788619的博客

05-30

2494

在物联网和人工智能技术推动下，传统视频监控正经历深刻变革。其核心原理在于将AI计算能力从云端下沉至网络边缘的设备端，通过在摄像头等终端部署轻量化神经网络模型，实现视频流的本地实时分析与结构化。这一技术路径的价值在于，它从根本上解决了海量视频数据传输带来的带宽压力与高延迟问题，使得毫秒级的实时感知与响应成为可能。结合边缘计算与事件驱动架构，智能摄像头能够将原始的像素流转化为标准化的语义事件流，从而为交通管理、公共安全、城市运维等场景提供即时、可编程的决策依据。本文以智慧城市中的交通治理为例，深入剖析了智能摄像

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

解决点击页面跳转导致路径叠加，无法显示的问题

m0_55728090的博客

04-11

1463

用Vue+element-ui 开发后台页面菜单的时候，会遇到点击路由能显示，但是在这个基础上再点击下一个页面的时候，不能正常显示，然后看链接，发现她们的path部分叠加在一起了。 { path: 'ccode', component: () => import('../components/ccode') }, { path: 'notice', component.

vue项目地址增改删选中等功能

_小郑有点困了的博客

03-18

670

首先地址列表，渲染数据其次，增加地址操作，相对简单，传到vuex,在vuex以数组长度为他生成一个id，再次，有点拐弯的地址修改操作，点击对应的修改按钮，以路由传参到修改页面，在created中过去这个路由传的参，进行查询，放在页面上最后，地址删除，就没什么了还有个在提交订单，支付之前选择地址的操作，这个时候要求，在点击地址的时候，会拿到这个订单的id，用于传去提交订单页，查询出来...

Vue 爬坑之路（三）—— 使用 vue-router 跳转页面

weixin_34050519的博客

01-13

3910

使用 Vue.js 做项目的时候，一个页面是由多个组件构成的，所以在跳转页面的时候，并不适合用传统的 href，于是 vue-router 应运而生。官方文档： https://router.vuejs.org/zh-cn/essentials/getting-started.html 有很多朋友找我要 demo，但是博客中的这个案例被我删掉了，我只好随手写了一个超简单的 demo，希...

【Vue】Router路由无法跳转问题整理

Sheldon74的博客

09-08

1万+

Vue Router路由无效或异常等问题整理

Vue学习Day11 router-link属性、动态路由、路由的懒加载、嵌套路由、路由的参数传递、代码跳转路由

AIpoem的博客

07-14

4562

1. router-link补充 2. 通过代码跳转路由 3. 动态路由 4. 路由的懒加载 5. 嵌套路由 6. 命名视图 7. 路由的参数传递

【vuejs】vue-router 路由跳转参数传递详解和应用场景及技巧

工作的日常记录和平凡的生活分享

07-03

5314

路由定义是Vue Router中实现页面路由跳转的基础。在Vue2中，路由的定义通常在应用的入口文件或路由配置文件中进行。路由定义涉及到路径模式（path）、视图组件（component）以及一些高级配置，如命名视图、重定向、别名等。 - 路由模式：路由的路径模式定义了URL的路径与组件的映射关系。例如，`{ path: '/user/:id', component: User }` 表示当URL匹配到 `/user/:id` 时，将渲染 `User` 组件，其中 `:id` 是一个动态参数。 - 组件映

【Vue路由（router）进一步详解】

小田是个程序员的博客欢迎你的到来呀~

03-23

3万+

文章主要从Vue-router（路由）常用的几个属性以及参数配置出发，更深一层了解路由在实际开发中的使用，结合实例向大家说明路由常用的参数配置，以及使用路由的一些小技巧。

Vue.js：Vue-Router动态路由从服务器接口获取路由数据

彭世瑜的博客

03-28

6012

用户可以添加新的分类，分类和路由的显示方式一致，拥有和路由相同的逻辑，故而采用通过服务端返回数据生成动态路由的方式解决。既然是动态路由，所以需要响应式，当路由数据发生变化时，可以及时的获取通知。页面上显示的时候，需要从vuex获取路由信息，可以及时刷新页面数据。通过服务端接口返回的数据生成路由，是异步返回的数据，动态添加。可以通过Vue-Router提供的api，动态添加路由数据。动态路由首次跳转的时候，动态路由还没有添加，需要转换处理。该接口获取的路由数据是一维数组，和路由配置格式不一样。

Vue-router的动态路由：获取传递的值

TianXuab的博客

11-16

1280

定义动态路由非常简单，只需在路由路径中使用冒号（:）作为变量的前缀。routes: [})在上面的代码中，我们定义了一个名为“user”的路由，并将其路径设置为“/user/:id”。这意味着我们可以在路由中使用“:id”作为变量，并在组件中访问它。

Vue 动态添加路由及生成菜单

分享我的编程经验和学习心得

06-19

1万+

vue重复路由_解决vue路由name同名,路由重复的问题

weixin_34864191的博客

01-30

5394

在项目中，想让路由后缀为空，或者index的时候，都跳转到路由为index的页面，于是在router中如下配置routes: [{path: '/',name: 'index',component: () => import('@/components/index').then(m => m.default)},{path: '/index',name: 'index',compone...

vue 动态路由匹配 URL路径重复追加

weixin_40769819的博客

07-08

1734

问题：点击<router-link>标签，页面url地址不断在原来url地址上追加，无法跳转代码 <router-link to="user/001">USer001</router-link> <br> <router-link to="user/002">USer002</router-link> 解决： <router-link to="/user/001">USer001</rou

Vue登录后添加动态路由并跳转（超详细）

前端学习笔记

07-18

3708

Vue3TypeScript有这样一个需求，系统默认只有最基础的几个路由，如登录、404等，其它路由需要在登录后动态添加。系统没有固定首页，登录完成后跳转至动态菜单的第一个菜单页。

【愚公系列】《循序渐进Vue.js 3.x前端开发实践》061-Vue Router的动态路由

热门推荐

愚公智库

02-08

12万+

在现代单页面应用（SPA）的开发中，灵活而高效的路由管理是实现良好用户体验的关键。而 Vue Router 作为 Vue.js 的官方路由管理工具，提供了强大的动态路由功能，使得开发者能够根据应用需求动态地配置和渲染路由。这种灵活性不仅可以简化代码结构，还能降低项目的复杂度，让开发者专注于业务逻辑的实现。本文将深入探讨 Vue Router 中的动态路由，重点介绍如何定义和使用动态路由参数、如何通过动态路由实现更复杂的页面结构，以及如何在实际开发中利用动态路由提升应用的可维护性和扩展性。

踩坑记16 vue-router4 动态路由刷新404/白屏/样式错误 next css | 退出登录 removeRoute()后 router.options.routes未更新

Alloom的博客

08-16

1万+

2021.8.16 坑53（vue3、vue-router4、动态路由、刷新404或白屏、next）：简略版：（tips：不只刷新会出问题，输入网址导航也会） 1、刷新404：将匹配全部为定义路径到404的路由从静态路由表中去除，在动态权限路由都添加了之后在添加。接下来可能会报warn并白屏，解决方法见下一条2。 2、刷新白屏：如果是在路由守卫router.beforeEach中检测并用router.addRoute添加的路由，则需要将动态权限路由添加后的next()放行，改为next(to)触发

【记录】【vue】动态路由添加

小阿瑾的瑾的博客

12-09

2520

一、动态路由最近接到一个需求，不需要在router配置文件里手动注册路由，点击菜单时，根据菜单上的地址，自动添加路由，跳转。(他们说我不管，反正菜单信息给你了，页面我写好了，但是我就不配路由，我懒得配，你自己想办法跳转.......................) (我只是个小白啊喂！！) 看下官网怎么说(API 参考 | Vue Router (vuejs.org))；二、创建 1 全局我做了两种方法，一种是登录之后我可以...

陈新科的博客

09-22

5355

目录 router的基本使用 main.js App.vue router文件夹下的index.js(抽离router) 动态传参+编程式导航 App.vue user.vue组件嵌套路由路由传参,懒加载 router的index.js Info组件 User组件 App.vue 守卫钩子（全局+独享+组件内的守卫）登录页路由 About.vue 补充：解决重复点击路由报错： $route和$router的区别： router的基本使用 main...