vue router 页面改变，url出错

最新推荐文章于 2023-09-04 13:42:43 发布
最新推荐文章于 2023-09-04 13:42:43 发布
阅读量361 收藏
点赞数
分类专栏： vue 坑 文章标签： vue-router
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Damon99999/article/details/100098772
版权
坑 同时被 2 个专栏收录
6 篇文章 0 订阅
订阅专栏
vue
5 篇文章 0 订阅
订阅专栏

描述：

vue路由正确导航到所指的页面，但是地址栏的url却出现了问题（对比图3与图5地址栏）

错误：

  • 图1

在这支持下里插入图片描述

问题在于“row.orderId”,因为在row这个对象内压根就没这个属性，导致params出问题，最后导致图三地址栏出现无地址的问题
  • 图2

在这里插入图片描述

  • 图3

在这里插入图片描述

正确

  • 图4

在这里插入图片描述

此时params取得到参数，不报错！
  • 图5

在这里插入图片描述

地址栏正确显示
Damon_99999
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vue实践---根据不同环境,自动转换请求的url地址操作
10-14
每个环境的API请求URL会有所不同，手动修改每次请求的URL显然是低效且容易出错的。本文将介绍一种自动化处理不同环境下请求URL的方法。 首先，创建一个名为`RequestConfig.js`的配置文件，用来存储各个环境的API...
Vue-router的使用和出现空白页,路由对象属性详解
10-18
Vue-router 是 Vue.js 应用中的重要组件，用于管理应用的路由系统，使得在不同页面之间切换变得简单而无需向服务器发送请求。本篇文章将详细讲解 Vue-router 的使用方法，以及如何解决可能出现的空白页问题，并深入...
Vue学习-路由地址重复报错
Java_Scholar0的博客
09-17 333
Vue前言原因以及解决方法:1.原因:2.解决方法: 前言 通过Vue路由访问不同页面出现以下错误: 原因以及解决方法: 1.原因: 点击访问不同的页面时，路由地址未发生改变(浏览器url地址未发生改变)。 2.解决方法: main.js中添加以下代码: const routerPush = Router.prototype.push Router.prototype.push = function push(location) { return routerPush.call(this, locatio
Vue中用户输入无效地址，跳转到错误提示页面
zyz00000000的博客
03-23 3111
1. 在动态路由中，有的路径是无效路径，可以让无效的路劲跳转到错误提示页面 组件的$router属性的原型上有一些方法（this.$router） （1）go方法 （2）replace：用新的路径替换错误路径，同时创建错误页面的组件 a——b（不存在的路径）——c（用c取代了b）；所以路径中就是a——c （3）push：a——b（不存在的路径）——c（在b后面添加了c）；所以路径就是...
vue中this.$router.push()跳转导致页面刷新导航栏active不改变问题解决~！
qq_45332221的博客
07-13 5391
前言 写vue项目中遇到了导航栏绑定的active不改变，路由正常跳转了结果导航栏显示还是第一个。 于是我就开始排错，发现每次路由跳转，导航栏绑定的activeNum都被刷新掉归0了，也就是显示第一个。刚开始确实好久没发现问题，以前也是这么写的没出过问题。 转机 后来我想是不是因为，这个导航栏是在router-view跳转的子组件中的原因，页面跳转的时候将整个子组件都刷新了，表面上看是子组件中的子组件刷新（相当于孙子级别的组件刷新），其实跳转的时候是刷新的整个子组件。 解决 然后我就在子组件的导航栏中cre
vue跳转，前进后退，点击浏览器的返回按钮，地址栏路由变了但是页面没跳转
最新发布
H_ZMY的博客
09-04 3821
页面A—>B,B—>C,C—>B(OK),B—>A(失败)已解决。
解决this.$router.push()带参数跳转时，页面地址改变，数据却没有刷新的问题。
qq_45791799的博客
10-14 3619
一、问题 今天遇到一个问题，我用this.$router.push()带参数跳转时，页面的url地址发生了改变，但页面却没有刷新，需要刷新一下才能重新获取数据，查看资料找到了解决方案。 二、原因 created并不是每次进入页面都会执行，因为vue会使用页面的相同组件，所以这里才不会进行数据刷新。 三、解决方法 当路由发生跳转时，需要在watch里监听路由的变化 ...
解决vue router使用 history 模式刷新后404问题
08-29
const router = new VueRouter({ mode: 'history', routes: [ { path: '*', component: NotFoundComponent } ] }) ``` 这样，在刷新页面时，如果 URL 匹配不到任何静态资源，就会返回 `NotFoundComponent` 组件...
vuerouterstorage一个vue历史路由持久化的解决方案
08-08
Vue Router通过定义不同的路由路径（routes）来映射不同的组件，当用户在浏览器中改变URL时，Vue Router会根据新的URL加载对应的组件。通过`router.push`、`router.replace`等方法可以手动导航到新的路由。 实现...
vue中重定向redirect:‘/index‘,不显示问题、跳转出错的完美解决
10-14
在Vue.js应用中，重定向是一个常见的需求，用于在用户访问特定路径时自动导航到其他页面。`redirect`属性在Vue Router的路由配置中用于指定一个路径，当匹配到该路由时，会立即跳转到指定的新路径。然而，在实际开发...
vue resource post请求时遇到的坑
11-27
使用 post 请求 // global Vue object Vue.http.get('/someUrl', [options]).then(successCallback, errorCallback); Vue.http.post('/someUrl', [body], [options]).then(successCallback, errorCallback); // in a Vue instance this.$http.get('/someUrl', [options]).then(successCallback, errorCallback); this.$http.po
解决vue项目点击router-link,跳转路由成功，但是地址栏显示路径异常的问题
vuex的学习笔记
04-07 6166
其实很简单，router-link之前是通过a标签改造好的，a标签中的href="#"一直没有删掉，手动删除之后，显示正常！ 下面是显示不正常的时候： 改造后的结果： ...
vue3自学——vite的多级、二级路由下的跨域配置错误问题
Mufeng30的博客
11-10 785
vue3自学——vite的多级、二级路由下的跨域配置错误问题
vue路由错误
qq_43913589的博客
10-21 2042
首先看一下项目结构： 运行后发现网页上并没有显示“登录组件”，打开调试工具发现控制台报错：vue-router.esm.js?8c4f:16 [vue-router] Non-nested routes must include a leading slash character. Fix the following routes: ./login 这个错误是说（网上搜的），非嵌套路由必须包含前导斜杠字符。 仔细检查一下代码，发现多写了一个“.” 改正以后应该没什么问题了吧，然鹅事情并没有那么简
vue中路由跳转方式汇总，解决正确跳转不能显示页面问题。
热门推荐
张凯杰扽博客
11-02 1万+
自己所遇到的路由能跳转，但是不能正常显示的问题。 1，自己的路由路径写的有问题（能正常跳转，但是不能显示页面，可能是根据这个路由，找不到相应的文件页面，）。 2，没有正确在父页面中写出子页面显示的标签（"<router-view> </router-view>"） 3，注册的路由中含有错误文件路径，找不到应该显示的页面。 ➢ 前端路由跳转是使用的哈希跳转， ...
Vue router错误跳转到首页("/")的问题
qq_33061377的博客
11-07 1万+
Vue通过this.$router.push方法进行页面的跳转主要有两种方式 // router/index.js const routes = [{ path: "/", name: "login", component: Login }, { path: "/index", name: "index" component: Index } ] ①this.$ro...
前端路由vue-router介绍
anmi3721的博客
10-12 365
一、前端路由vue-router介绍 　　Vue-Router 是Vue.js官方的路由管理器。它和 Vue.js 的核心深度集成，让构建单页面应用变得易如反掌。包含的功能有： 嵌套的路由/视图表 模块化的、基于组件的路由配置 路由参数、查询、通配符 基于 Vue.js 过渡系统的视图过渡效果 细粒度的导航控制 带有自动激活的 CSS class 的链接 HTML...
vue-router错误
weixin_47306228的博客
06-29 584
出现这个问题的原因是因为： 在vue实例中路由的名称必须为router,而不能是其他
vue router push重定向问题
q4717529的博客
12-23 1213
vue router push重定向问题 import Router from "vue-router"; Vue.use(Router); const originalPush = Router.prototype.push; Router.prototype.push = function push(location) { return originalPush.call(this, location).catch((err) => err); };
vue router 页面跳转
07-16
import VueRouter from 'vue-router' Vue.use(VueRouter) ``` 接下来，你需要定义你的路由。在同一个文件中，创建一个新的Vue Router实例，并配置你的路由规则。例如： ```javascript const routes = [ { path: ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值