Vue路径跳转问题——$route

已于 2022-04-18 11:17:26 修改
阅读量1.4k 收藏
点赞数
分类专栏： vue webstorm html 文章标签： vue.js 前端 chrome webstorm javascript
于 2022-04-18 11:14:45 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_35869617/article/details/124244715
版权
vue 同时被 3 个专栏收录
8 篇文章 0 订阅
订阅专栏
webstorm
4 篇文章 0 订阅
订阅专栏
html
3 篇文章 0 订阅
订阅专栏

路由跳转小技巧

方法一：修改路径

注意：需要判断在路由已加载的情况下刷新，如果路由未加载则无需刷新
if (this.$router.options.routes[1] !== undefined && location.href.indexOf("#reloaded") === -1) {
location.href = location.href + “#reloaded”;
location.reload();
}

方法二：跳转方式

点击跳转按钮时，后端返回成功，用window.location.href="/"跳转 ，弃用this.$router.push/replace...

方法三：刷新

退出时，执行 location.reload();

tips: 方法一效果不太好看，方法二方便简单，方法三总觉的用了心里不舒服，可能是刷新给人的感觉就不舒服吧

还有其他处理方式，欢迎私信或者评论区指出~

llsleader
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
vue路径返回的正确使用
代码青春
03-11 1003
vue路由跳转 返回上一级 this.$router.go(-1) 和返回到指定页面this.$router.push('/home') 1，点击返回上一页 <button @click="goBack">goback</button> methods:{ goBack: function(){ /** 返回上一级页面用 this.$ro...
this.$route.fullpath
weixin_44727080的博客
11-02 625
this.$route.fullpath 工作中遇到问题
vue中实现路由跳转的三种方式（超详细整理）
热门推荐
sebeefe的博客
07-31 2万+
先自我介绍一下，小编13年上师交大毕业，曾经在小公司待过，去过华为OPPO等大厂，18年进入阿里，直到现在。深知大多数初中级java工程师，想要升技能，往往是需要自己摸索成长或是报班学习，但对于培训机构动则近万元的学费，着实压力不小。自己不成体系的自学效率很低又漫长，而且容易碰到天花板技术停止不前。因此我收集了一份《java开发全套学习资料》送给大家，初衷也很简单，就是希望帮助到想自学又不知道该从何学起的朋友，同时减轻大家的负担。添加下方名片，即可获取全套学习资料哦。...
2024年最新Vue路由跳转的五种方式_vue路由跳转方式，面试官vo
最新发布
2401_84447328的博客
05-15 854
今天的文章可谓是积蓄了我这几年来的应聘和面试经历总结出来的经验，干货满满呀！如果你能够一直坚持看到这儿，那么首先我还是十分佩服你的毅力的。所以看完之后，还是多多行动起来吧！可以非常负责地说，如果你能够坚持把我上面列举的内容都一个不拉地看完并且全部消化为自己的知识的话，那么你就至少已经达到了中级开发工程师以上的水平，进入大厂技术这块是基本没有什么问题的了。开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】可追溯编程式。
【vue中路由的使用】
weixin_52452081的博客
05-16 1697
对于普通的网站，所有的超链接都是URL地址，所有的URL地址都对应服务器上对应的资源。
Vue页面跳转但是导航高亮不会改变
weixin_44689277的博客
03-14 2363
问题： 在页面上点击时，高亮会变但是在后天用代码的话就不会变。 this.$router.push({ name: "write" }); 用这段代码高亮不会改变。 原因： 因为没有改变导航栏的 default-active （当前激活菜单的 index）。因为你用代码进行了改变，但是没有改变default-active的值。所以高亮不会改变。 解决： 每次变换路径时，进行刷新default-active。用监听器监听。 定义一个数据 定义函数handleSelect .
在Vue中使用this.$store或者是$route一直报错的解决
10-16
今天小编就为大家分享一篇在Vue中使用this.$store或者是$route一直报错的解决，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
Vue路由对象属性 .meta $route.matched详解
12-13
$route.fullPath 1 路由是：/path/:type真正路径是：/path/list 2 path匹配路径: /path/list 3 fullPath匹配路由: /path/:type 路由元信息 .meta const router = new VueRouter({ routes: [ { path: '/foo', ...
vue $router和$route的区别详解
01-22
一、router为VueRouter的实例，相当于一个全局的路由器对象，里面含有很多属性和子对象，例如history...打印this.$route和this.$router。 路由传参的方式 1.可以手写完整的path： this.$router.push({path:`/user/$
vue router总结 $router和$route及router与 router与route区别
12-12
例如，`$route.path` 返回当前的路径，`$route.params` 包含动态片段的值，`$route.query` 提供 URL 查询参数。 - `$router` 实例则是 Vue Router 的核心，提供了如 `push`、`back`、`replace` 等方法，用于控制...
实现router路径跳转
qq_40547015的博客
04-29 2270
一、 无参数 this.$router.push({path: `/login`}); 二、有参 this.$router.push({path: `/fContract/update/${this.user.userId}`}); // 跳转到createUser页面 toCreateUser(userId){ console.lo...
关于Vue中给router-view 设置key的原因（$route-fullPath）
weixin_54187299的博客
05-06 4278
1. 不设置 router-view 的 key 属性 由于 Vue 会复用相同组件, 即 /page/1 =>>> /page/2 或者 /page?id=1 =>>> /page?id=2 这类链接跳转时, 将不在执行created, mounted之类的钩子, 这时候你需要在路由组件中, 添加beforeRouteUpdate钩子来执行相关方法拉去数据 相关钩子加载顺序为: beforeRouteUpdate 2. 设置 router-view 的 key..
还不知道router-view中的key=‘$route.fullPath‘吗
...
10-05 2955
router-view中的key='$route.fullPath'
Vue(七)：路由
baiduwenku112的博客
12-30 3353
一、前端路由的概念及原理 1.1 什么是路由 路由（router）就是对应关系 1.2 SPA与前端路由 SPA：单页面应用程序 前端路由：Hash地址与组件之间的对应关系 URL中#后面的都叫Hash地址，location.hash即可获取 1.3 前端路由的工作方式 （1）用户点击了页面上的路由链接 （2）导致了地址栏中的Hash值发生了变化 （3）前端路由监听到了Hash地址的变化 （4）前端把当前Hash值对应的组件渲染到浏览器中 二、vue-route.
vue 中使用window.location不能跳转（待补充）
YYYYYun的博客
07-31 4973
项目中因为有个地方需要跳转第三方页面，所以使用了window.location.href 进行跳转，出现问题： 可以跳转至https页面 不可以跳转至http页面 解决方法：http页面尾部加了个 / 原因： 待补充
解决点击页面跳转导致路径叠加，无法显示的问题
m0_55728090的博客
04-11 1294
用Vue+element-ui 开发后台页面菜单的时候，会遇到点击路由能显示，但是在这个基础上再点击下一个页面的时候，不能正常显示，然后看链接，发现她们的path部分叠加在一起了。 { path: 'ccode', component: () => import('../components/ccode') }, { path: 'notice', component.
vue router跳转页面常用的几种方法
songjuntao8的专栏
01-11 1万+
一、 router-link跳转 ### 1.不带参数 <router-link :to="{name:'home'}"> <router-link :to="{path:'/home'}"> //name,path都行, 建议用name // 注意：router-link中链接如果是'/'开始就是从根路由开始；如果不带'/'，则从当前路由开始。 ###2.带params参数 <router-link :to="{name:'home', params: {id:1
vue中fullPath和path的区别
艾欢欢的博客
04-09 2万+
fullPath匹配路由，path匹配路径。 例如： 路由是：/path/:type 真正路径是：/path/list 那么此时path为/path/list，而fullPath为/path/:type
this.$router和this.$route区别 && 路由传参的2种方式 && this.$route的各种语法
monika_beiluqi的博客
04-05 8641
一 this.$router 和 this. $route 区别 vue官方文档说明: 通过注入路由器，我们可以在任何组件内通过 this.router访问路由器，也可以通过this.router 访问路由器，也可以通过 this.router访问路由器，也可以通过this.route 访问当前路由. 通过打印出: this.$router 和 this. $route : this.$router: 是VueRouter的实例. 包含了很多属性和对象（比如 history 对象），任何页面都可以调用
vue2中watch监听$route的变化
06-12
在 Vue2 中，可以使用 `$route` 对象来监听路由的变化。可以通过 `watch` 属性监听 `$route` 对象的变化，例如： ```javascript watch: { '$route': function (to, from) { // 路由变化时的操作 } } ``` 在 `$route` 对象变化时，会执行回调函数，并将新的路由对象 `to` 和旧的路由对象 `from` 作为参数传递给回调函数。可以在回调函数中根据需要处理路由变化时的操作。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

打赏作者

llsleader

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

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

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

打赏作者

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

抵扣说明：

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

余额充值