vue-router配置路由实现返回上一页，上一页页面数据留存

最新推荐文章于 2024-03-05 10:34:14 发布
最新推荐文章于 2024-03-05 10:34:14 发布
阅读量4.8k 收藏 3
点赞数
分类专栏： vue 文章标签： vue.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_39537116/article/details/105517248
版权

在需要数据留存的路由添加项：

meta:{

            keepAlive:true

 }

然后在router-view页面判断页面留存路由参数：

Lion暖冰
关注
  • 0
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
详解vue-router 动态路由下子页面多页共活的解决方案
10-15
主要介绍了vue-router 动态路由下子页面多页共活的解决方案，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
Vue路由跳转（返回上一页以及返回到指定页面）
m0_51358164的博客
08-29 9984
1，自动返回上一页 methods:{ goback(); }, goback(){ this.$router.go(-1) } 2，自动跳转到指定页面 methods:{ ToSkip(); }, ToSkip(){ this.$router.push('/skip') } //最常用的 或者 ToSkip(){ this.$router.push({name:'skip'}) }//采用对象的方法 ...
鸿蒙-简单实现一个跳转页面及返回（路由）
最新发布
zhaoyihang793的博客
03-05 847
Button('跳转页面')//跳转不成功会有error。
vue路由带参跳转，刷新后参数不消失
feicongcong的博客
08-25 4472
方法一：$router里使用query对象 路由带参数跳转 this.$router.push({ name: 'IcProjectView',//跳转的路由（路由的name） params: {//params id: params.row.id
vue单页面实现路由跳转后保留原页面数据
热门推荐
weixin_51958039的博客
10-24 1万+
在设置keep-alive缓存的组件中，首次进入组件，会一次调用组件的钩子函数：created --> mounted -->activated 再次进入时，只触发activated钩子函数。2.在路由选项中，配置meta属性，keepAlive为true即为需要缓存的组件，同时设置isBack属性，用来标示页面是否是从详情页面返回的。该步骤可以让一个组件里的值传到另一个组件里，不需要父子关系。页面的缓存，需要用到vue的内置组件keep-alive，来缓存列表页面，同时配合路由选项来更改页面的数据。
vue实现路由跳转到新页面，返回旧页面，保留之前的数据记录
qq_45801301的博客
10-24 3189
vue实现路由跳转到新页面，返回旧页面，保留之前的数据记录
vue项目实现路由跳转到新页面，返回旧页面，保留之前的数据记录
害。代码嘛，可不就是敲着玩！
08-09 4469
vue项目实现路由跳转到新页面，返回旧页面，保留之前的数据记录
vue路由传参的两种方式,实现返回上个页面不刷新
anny_mei的博客
07-17 9771
我的项目是当在新增页面(下面叫A页面)先提交一些数据,然后跳转到下一个页面(下面叫B页面)再填写数据,然后返回到新增的页面 之前我直接跳转回B页面goback(),这样的话跳转回来A页面就什么数据都没有了 解决方法有两种,一种是在地址栏里面拿参数 this.$router.push({ name:'xxxxxxxxx', // 跳转的页面名称 params:{ id:this.id || "xxxxxxxxxx" } }) 在
路由跳转，返回旧页面保留操作数据。
m0_62099781的博客
05-19 3779
路由跳转到新页面，保存旧页面的查询、分页等数据。
vue3框架Vite + vue Router + ts 登录后返回上一页或首页
qq_39111074的博客
03-18 4951
vue3框架Vite + vue Router + ts 登录后返回上一页或首页
vue router返回上一页,vue路由跳转html页面
wenangou的博客
09-11 2501
在vue的路由中路由跳转登陆//内容显示的//1、准备一个根组件varApp=Vue.extend();建议你这样试试看：登录页跳转到A页面的时候使用router.replace方法,替换掉当前的路由栈在A页面写路由守卫beforeRouteLeave钩子函数，判断将要去的页面是否为登录页面，如果是则不执行next方法两种方式的优劣第一种方式比较简单直接，而且代码较容易维护第二种路由守卫的方式虽然可以解决问题单有点杀鸡用牛刀的意味了，针对你的需求，从代码维护角度考虑，有点成本。
vue单页面实现当前页面刷新或跳转时提示保存
10-17
主要介绍了vue单页面实现当前页面刷新或跳转时提示保存，在当前页面刷新或跳转时提示保存并可取消刷新，以防止填写的表单内容丢失，感兴趣的小伙伴们可以参考一下
使用vue-router切换页面时，获取上一页url以及当前页面url的方法
10-17
主要介绍了使用vue-router切换页面时，获取上一页url以及当前页面url的方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
使用vue-router在Vue页面之间传递数据的方法
10-16
主要介绍了使用vue-router在Vue页面之间传递数据的方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
Vue.js实战之利用vue-router实现跳转页面
11-30
使用 Vue.js 做项目的时候，一个页面是由多个组件构成的，所以在跳转页面的时候，并不适合用传统的 href，于是 vue-router 应运而生。 官方文档： https://router.vuejs.org/zh-cn/essentials/getting-started.html ...
基于vue-router 多级路由redirect 重定向的问题
10-18
今天小编就为大家分享一篇基于vue-router 多级路由redirect 重定向的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
vue路由传参的区别以及使用query可以在刷新时保留传递参数
qq_43597212的博客
07-19 1412
如果在路由配置中没有添加/id即path‘detail’，url中不会显示id，在详情页还是可以拿到参数id，但刷新后参数丢失。如果在路由中设置了params参数/id，但是在跳转的时候没有传递参数，会导致页面没有内容或跳转失败，可在后面加？通过$router.push的params+name传参，若路由中没有设置params参数，参数不会拼接在路由后面，但是页面刷新参数会丢失。常见场景点击列表的详情，跳转到详情内页，在内页根据传递的参数获取详情数据。...
路由返回上一步
mfxcyh的博客
04-15 851
1.引入路由 import { useRouter } from 'vue-router' 2.创建路由对象 const router = useRouter() 3.在模板中绑定事件 <div class="left" @click="goBack"> <solt name="left"> <a>&lt;</a> </solt> </div> 4.实现方法 const go
若依 vue3，关闭当前页面，返回上一页面
ouyang470的博客
09-24 7561
【代码】若依 vue3，关闭当前页面，返回上一页面。
vue-router实现页面路由跳转以及路由嵌套
05-18
Vue Router 是 Vue.js 官方的路由管理器。它和 Vue.js 的核心深度集成，可以非常方便的实现单页面应用程序的路由功能。 Vue Router 提供了以下两种方式实现页面路由跳转： 1. 声明式导航：通过 `<router-link>` 组件实现页面跳转，该组件会被渲染成一个 `<a>` 标签，点击该标签后会触发路由跳转。 2. 编程式导航：通过 `$router` 对象提供的方法实现页面跳转，例如 `$router.push()`、`$router.replace()`、`$router.go()` 等方法。 下面我们来看一个简单的示例，在 Vue Router 中如何实现页面路由跳转： ```html <!-- 在模板中使用 router-link 组件 --> <router-link to="/home">Home</router-link> <!-- 在组件中使用 $router 对象实现编程式导航 --> <button @click="$router.push('/about')">About</button> ``` 在上面的示例中，我们分别演示了如何使用 `<router-link>` 组件和 `$router` 对象实现页面路由跳转，其中 `to` 属性表示跳转的目标路由地址。 此外，Vue Router 还支持路由嵌套的功能，可以通过嵌套路由的方式实现页面的嵌套展示。下面我们来看一个嵌套路由的示例： ```javascript const router = new VueRouter({ routes: [ { path: '/home', component: Home, children: [ { path: 'news', component: News }, { path: 'videos', component: Videos } ] } ] }) ``` 在上面的示例中，我们定义了一个名为 `Home` 的路由组件，并在该组件中嵌套了两个子路由 `News` 和 `Videos`，这样就可以实现在 `Home` 组件中展示新闻和视频内容的功能。在实际开发中，我们可以根据实际需求来定义不同的路由组件和子路由，实现灵活的页面嵌套效果。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值