解决vue项目点击router-link,跳转路由成功，但是地址栏显示路径异常的问题

最新推荐文章于 2024-08-09 03:37:41 发布

戴着牙套的僵尸

最新推荐文章于 2024-08-09 03:37:41 发布

阅读量6.2k

点赞数 2

本文链接：https://blog.csdn.net/qq_39451935/article/details/89072164

版权

其实很简单，router-link之前是通过a标签改造好的，a标签中的href="#"一直没有删掉，手动删除之后，显示正常！

下面是显示不正常的时候：

在这里插入图片描述

改造后的结果：

在这里插入图片描述

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

戴着牙套的僵尸

关注关注

2
点赞
踩
2

收藏

觉得还不错? 一键收藏
8
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

vue2（6）之声明式导航router-link类名&传参/路由重定向/路由两种模式hash&history/编程式导航路径跳转&传参/案例面经基础版/vueCli自定义创建项目/eslint

qq_66318904的博客

05-06

716

router-link的两个高亮类名太长了，我们希望能定制怎么办声明式导航跳转时, 有几种方式传值给路由页面？查询参数传参（多个参数）动态路由传参（一个参数，优雅简洁）keep-alive 是 Vue 的内置组件，当它包裹动态组件时，会缓存不活动的组件实例，而不是销毁它们。keep-alive 是一个抽象组件：它自身不会渲染成一个 DOM 元素，也不会出现在父组件中。在组件切换过程中把切换出去的组件保留在内存中防止重复渲染DOMApp.vue

Vue3 - 路由 Vue-router 4.X（配置与使用教程）

王佳斌

11-30

3775

vue3 路由官方文档，vue3 路由文档，vue-router4 官方文档，使用Vite构建Vue3项目,对路由Vue Router，Vue3中 Vue Router4路由的配置，vue3-vueRouter v4.x， vue3 中 vue-router4 基本使用(路由基本配置)，Vue3 - Router@4.x使用，vue-router4.x教程，Vue 3 中基于 vue-router 4 的路由配置与使用的简单示例，Vue实战—路由轻松设置vue-router(3) ，10分钟快速上手VueR

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

VUE根据路由跳转改变头部导航栏文字

marsur的博客

06-19

3736

效果图步骤如下： 1.在router/index.js路由文件通过定义每个页面中name的值来定义顶部导航栏的文字 { name:"琴房管理系统", path:"/myHome", component:() => import("../page/common/myHome.vue") } 2.父组件传值 2.1.在父组件APP.vue...

项目小记--VUE路由页面跳转后地址栏显示异常

a870017443的博客

03-24

1251

今天又遇到一个神奇的问题，就是路由时页面跳转成功，但是地址栏显示出现问题正常应该使用这样的，，但是成功跳转后的结果却是这样的怀疑时路由设置错误，试了几个并不是，后来网上查了下是因为这个。。。。标签的 href="#" 默认属性造成的。。 a标签有。。。。。router-link里面也有。。。闭眼打键盘 ...

Vue2.x 路由实现地址栏变化的API

08-09

964

Vue Router 是一个基于Vue.js的路由管理器。它提供了声明式的路由配置方式，并且集成了Vue的核心功能，使得我们可以轻松地构建SPA应用。

VUE跳转页面传值 地址栏显示参数或者不显示地址栏参数

聆听

12-22

3940

添加路由 { path: '/Qyqxhx', component: Qyqxhx, name: 'Qyqxhx', meta: { title: '页面名称' } }, params 传参 : 相当于post请求，页面跳转时参数不会在地址栏中显示 this.$router.push({ name:'Qyqxhx', params: { id: pripid } }) 接收参数：this.$route.params.id .

vue路由跳转页面不变，可能是routes参数的原因

qq_44149057的博客

04-26

2495

我刚开始的时候没有注意，以为new Router里面的参数可以随便命名，后来才发现，原来不是的，这里面的只能传routes,如果使用其他的命名会导致路由跳转了但是页面却没有发生改变。当然导致路由改变但是页面不变可能还有其他原因，这只是其中一种可能。

vue导航栏，页面跳转时导航栏不随之改变

qq_58194599的博客

03-06

1521

此处使用ChangeactiveIndex来更改state中的activeIndex 而这句话的意思是（ activeIndex: localStorage.getItem('activeIndex')||'1'） activeIndex的默认值为localStorage中的activeIndex，如果没有这个值的话就让默认值为首页所对应的索引，我这里首页用的索引是“1”，//在此处更改state中的activeIndex的值。//获取更改后的state中的activeIndex。

vue点击浏览器的返回按钮失效_关于vue-router中点击浏览器前进后退地址栏路由变了但是页面没跳转...

weixin_39653766的博客

12-23

2134

情景：在进行正常页面跳转操作后(页面A跳转到页面B)，点击浏览器的左上角的‘后退’按钮，点击后，可以看到url地址已经发生了变化(url由页面B变为页面A)，hash值也已经是上一页的路由，但是浏览器显示的内容却没有发生变化(依旧是页面B)。没有任何报错(页面A和页面B无任何js错误或者兼容性错误)。若有错误也会导致页面跳转不成功，页面依旧是当前页面，但是控制台会报ERROR。但是页面按浏览器刷新...

Vue-router路由跳转的两种方式与路由传参的方法

qq_37635012的博客

06-02

3988

路由的两种跳转方式路由跳转有两种方式：声明式和编程式。我们之前用的< router-link :to="…">< /router-link>创建 a 标签来定义导航链接属于声明式。我们还可以借助 router 的如下这些实例方法创建编程式导航: router.push router.push(…)它就等同于< router-link :to="…"> router.push(…)这个方法会向 history 栈添加一个新的记录，当用户点击浏览器后退按钮时，则回到之前

Vue-Router来实现组件间跳转的三种方法

08-28

Vue-Router提供了多种方法来实现组件之间的跳转，包括直接修改地址栏中的路由地址、使用router-link和使用编程式导航。不同的方法都有其优缺，开发者可以根据具体情况选择合适的方法来实现组件之间的跳转，提高应用...

Vue的router-link路由跳转但页面没有刷新！！

实事求是，艰苦奋斗，小小的梦想，终将实现。

02-18

2469

原因 vue-router中router-link路由跳转也传统的路由跳转不同，vue-router的路由跳转其实是组件之间的跳转。因此：在跳转相同组件不会触发vue的视图更新。解决方法在router-view上添加 :key="$route.fullPath"属性即可。 <router-view :key="$route.fullPath" /> ...

vue-router 使用a链接跳转至二级子页面偶尔会出现地址栏看不见路由和参数的情况...

weixin_33858336的博客

08-16

693

之前在做一个vue项目，使用vue-router进行路由跳转，切换页面的时候，需要在页面跳转之前进行一些判断操作，便没有使用router-link这个标签，而是使用了a标签，我的需求是，从/stastic路由跳转至/fullView路由，然后在fullView页面点击返回，返回至stastic页面当时stastic页面是这么写的 <a href="#" @click="goFu...

Vue解决路由切换页面导致位置不变的问题

うさぎの喫茶店

03-03

938

Vue中使用router切换页面会发现页面切换后位置不变可以在项目的router文件夹中的index.js中添加以下代码 scrollBehavior (to, from, savedPosition) { return { x: 0, y: 0 } } 添加后就可以像刚打开一样展示在页面的最顶端官网有更详细的解决方案附上我index.js的全部代码 import Vue from ...

vue父路由跳转到子路由时，路径变化但页面不改变，仍然为父页面的解决办法

前端小白, 稀土：雩风十六

07-09

5173

项目中遇到了这样一个问题：我想要从父页面跳转到子页面然后在父页面中通过进行跳转，想要的结果是跳转后父路由区域替换为子路由，但是实际结果却是路径改变了，面包屑也更新了，控制台里也显示触发了子路由的mounted钩子里的方法，但是页面仍然是父页面没有替换为子页面。

vue-router资源请求路径错误

qq_40822000的博客

03-03

883

废话不多说，直接上bug 一看就是资源路径错误，请求路径中是相对路径。解决：在vue-config.js里面修改publicPath就行： module.exports = { publicPath: "/", // 基本路径 outputDir: "dist", // 输出文件目录 lintOnSave: false, // eslint-loader 是否在保存的时候检查 ...

vue中router-link地址变化但页面不刷新

m0_53703061的博客

04-03

579

解决vue中路由改变但是页面不刷新的问题

weixin_47180815的博客

12-15

757

watch: { // 监听路由变化 "$route": function (newUrl, OldUrl) { console.log("监听路由"); console.log(newUrl, OldUrl); this.init(); }, }, 通过watch方法监听router的改变，当路由改变时调用页面初始化的方法。官网参考： https://router.vuejs.org/zh/guide/advanced/data-fet.

Vue 解决route-link路由跳转时页面不刷新问题

qq_46274901的博客

04-15

4736

Vue 解决route-link路由跳转时页面不刷新问题

<router-link to="/login">，然后路由中已经{ path: "/login", component: LoginVue },但是不发生跳转

06-10

如果你使用 `<router-link to="/login">` 标签来触发路由跳转，但是页面没有发生跳转，可能有以下几个原因： 1. 路由配置错误：首先，你需要确保你的路由配置正确。在你的路由配置中，你已经将 `/login` 路径与 `LoginVue` 组件关联起来，但是如果这个组件并没有正确地渲染到页面中，那么页面就不会发生跳转。你可以在浏览器地址栏中手动输入 `/login`，看看是否能够正确地渲染出 `LoginVue` 组件。如果无法渲染，那么可能是组件代码有问题。 2. 存在其他的路由匹配规则：如果你的路由配置中存在多个路由匹配规则，那么可能会发生路由冲突，导致你想要跳转到 `/login` 的时候，实际上跳转到了其他的路径。在这种情况下，你可以使用 Vue 开发者工具来检查当前路由路径，看看是否与你期望的路径一致。 3. 路由守卫拦截：如果你在路由配置中使用了路由守卫，那么可能会发生路由拦截的情况。在这种情况下，你需要检查你的路由守卫代码，看看是否有拦截到你想要跳转的路径。如果有，你可以修改路由守卫代码，以允许跳转到 `/login` 路径。 4. 其他问题：还有可能是其他问题导致页面没有正确地跳转，例如浏览器缓存问题、网络连接问题等等。在这种情况下，你可以尝试清除浏览器缓存，或者使用其他浏览器或设备来尝试访问页面。