vue3路由跳转，保留可以返回的历史记录

最新推荐文章于 2024-02-02 14:31:30 发布
最新推荐文章于 2024-02-02 14:31:30 发布
阅读量381 收藏
点赞数
文章标签： 前端 javascript 开发语言
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Sober1223/article/details/134135920
版权 
// 跳转到指定路径  
router.push('/content/dataanalysis/overview');  
  
// 替换当前路由，并保留历史记录  
router.replace('/content/dataanalysis/overview');  
  
// 向前或向后跳转指定的数量，正数表示向前跳转，负数表示向后跳转  
router.go(1); // 向前跳转1个页面  
router.go(-1); // 向后跳转1个页面

黄大大的前端生活
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
vue3-监听当前路由-获取全部路由
weixin_43932092的博客
03-08 1078
在app.vue页面中。
解决vue单页路由跳转后scrollTop的问题
10-18
今天小编就为大家分享一篇解决vue单页路由跳转后scrollTop的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
Vue切换组件，返回后不重置数据，保留历史设置
Sun~Neo
04-06 6330
1、<router-view ></router-view> 外层包围<keep-alive></keep-alive> keep-alive作用将组件实例缓存下来 <keep-alive> <router-view></router-view> </keep-alive> 2、清除组...
vue相同路由跳转强制刷新该路由组件操作
10-14
主要介绍了vue相同路由跳转强制刷新该路由组件操作，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
vue-router路由跳转
高压锅博客
12-10 1321
1.router.push(location, onComplete?, onAbort?) 这个方法会向 history 栈添加一个新的记录，所以，当用户点击浏览器后退按钮时，则回到之前的 URL。 注意：在 Vue 实例内部，你可以通过 router.push。 当你点击 时，这个方法会在内部调用，所以说，点击 等同于调用 router.push(…)。 声明式 编程式 ...
Vue.js中该如何自己维护路由跳转记录
10-16
主要给大家介绍了关于Vue.js中该如何自己维护路由跳转记录的相关资料，文中通过示例代码介绍的非常详细，对大家学习或者使用Vue.js具有一定的参考学习价值，需要的朋友们下面来一起学习学习吧
Vue-router 三.历史记录
weixin_43995121的博客
06-24 1028
1.通过routerlink replace 2.编程式导航进行处理，将push转为replace 3.针对历史记录去处理的JS逻辑
vue3回到上一个路由页面
pscool的博客
04-30 6881
/ 通过 `vm` 访问组件实例。'角色名称不能为空''角色标识不能为空'
【Vue-Router】历史记录
小秀的博客
08-13 686
consttoPagepathstring=>// 同样，replace 不保存历史记录replace
Vue3路由回退
gurenchang的博客
08-17 2983
2.在中引入需要的路由组件useRoute，并引用。1.在需要回退的页面，添加一个按钮，然后为这个按钮添加一个点击事件。3.调用回退事件的方法，实现点击事件绑定的函数。
vue记录路由历史+el-scrollbar，实现路由历史标签化
一只程序猿
10-09 2476
tag点击事件，调用方法计算scrollbr宽度，计算tag宽度，计算tag距离left（左边）多少px。tag宽度+距离右边再加20px左右，如果大于scrollbr宽度，证明tag所在位置已经到了最右边，实现点击tag之后scrollbr跟随滚动。4、把scrollbar和tag封装成组件，通过点击tag，获取tag位置，并计算scrollbar和tag宽度，实现根据tag位置，scrollbar跟随滚动。初始化数据渲染完成之后，通过当前路由获取下标，实现初始化计算。拦截，每次路由记录到缓存。
Vue路由跳转问题记录详解
08-30
本篇文章主要介绍了Vue路由跳转问题记录详解，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
vue 路由返回处理
samscat的博客
07-08 4993
case1: 在路由跳转之前做监听处理 // 回退事件监听，可以放在路由Router.beforeEach/beforeRouteLeave 里面 window.addEventListener('popstate', () => { // 相关处理，阻止返回上一级或者跳转其他页面 },false) case2: 取消路由历史记录 this.$router.replace({ path: '/content', query: { searchVal: val }
vue 简单的页面刷新或者跳转页面的数据保存问题
Alberqing_的博客
05-23 9674
当我们想刷新页面也保存当时的数据的时候，会遇到这样那样的问题，其实，仅仅的几行代码就什么都解决了，下面是代码（js）：var vm = new Vue({ el:'.search_moduel', data:{ history:[] //存储查询历史记录的数据 }, methods:{ //刷新页面或者从别的页面进入，提取this.history的值 getPag...
vue3 router路由跳转 返回上一级
最新发布
m0_70782896的博客
02-02 1031
vue3在setup函数中没有this指向所以就用useRouter 和useRoute。
vue3后台管理项目，后端返回动态路由
light的博客~~~
06-23 7530
vue3后台管理项目，后端返回动态路由
vue3 页面跳转 页面数据保留
qq_45118325的博客
07-27 2032
vue3 页面跳转 页面数据保留
vue实现路由跳转到新页面，返回旧页面，保留之前的数据记录
qq_45801301的博客
10-24 3220
vue实现路由跳转到新页面，返回旧页面，保留之前的数据记录
Vue-Router中的hash模式和history模式
m0_67014092的博客
04-26 288
history路由原理：利用window.history(history.pushState或history.replaceState)相关api实现路由跳转，从而改变页面内容。由于通过history的api进行路由跳转，并不会向服务器发起请求，也达到了前端路由的目的。history需要后端配合，否则页面刷新，或者根据路径直接访问项目会报404错误，因为打包后的文件一般只有index.html文件和一些打包后的js文件及文件夹，所以需要后端重定向到首页，进入项目后，再进行路由匹配。
vue3路由跳转返回顶部
01-11
在Vue.js中，可以通过配置路由的`scrollBehavior`属性来实现路由跳转返回顶部的效果。具体的实现方式如下所示： ```javascript import { createRouter, createWebHistory } from 'vue-router'; const router = createRouter({ history: createWebHistory(), routes, scrollBehavior(to, from, savedPosition) { return { top: 0 }; } }); export default router; ``` 在上述代码中，我们使用了`createRouter`函数创建了一个路由实例，并通过`createWebHistory`函数创建了一个基于浏览器历史记录的路由模式。然后，我们通过`scrollBehavior`属性定义了一个函数，该函数在每次路由切换时会被调用。在这个函数中，我们返回了一个包含`top`属性的对象，将页面滚动到顶部。 需要注意的是，上述代码是基于Vue 3版本的写法。如果你使用的是Vue 2版本，可以参考引用中的代码来实现路由跳转返回顶部的效果。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值