weex下的返回上一页以及页面跳转

前端开发一起交流QQ群:740034288。

互联网创业团队兴趣QQ群:792710437。

新建《团队合伙人》贴吧:https://tieba.baidu.com/f?kw=%E5%9B%A2%E9%98%9F%E5%90%88%E4%BC%99%E4%BA%BA&fr=index

1. weex下返回上一页:使用weex-vue-navigator插件。参考:https://github.com/MMF-FE/weex-vue-navigator。
    1.1 下载:npm i weex-vue-navigator --save-dev。
    1.2 在entry.js文件中配置引入:

const { router } = require('./router');
const App = require('@/index.vue');
import weexNavigator from 'weex-vue-navigator'
Vue.use(weexNavigator, {router})
new Vue(Vue.util.extend({el: '#root', router}, App));
router.push('/');
weexNavigator.bootstrap()

    1.3 在.vue文件中使用:
        this.$goTo(url)    //跳转指定页面。这个url是router里面配置的路由,如"/login",并自带动画效果。
        this.$back()  //返回上一页
        this.$goTo(url, true)

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Vue提供了许多选项和方法来保存和操作当前页面数据,以实现在跳转到下一个页面后仍能返回当前页面并保留数据的需求。其中,可以使用Vue路由中的导航守卫来处理这种情况。 导航守卫分为全局导航守卫和局部导航守卫。比较适合处理当前问题的是前者,可以在全局导航守卫中定义保存当前页面数据的方法,并在路由跳转时确保数据得到正确保存。 具体实现方式可以分为以下步骤: 1. 在Vue路由文件中定义全局导航守卫beforeEach和afterEach ```javascript router.beforeEach((to, from, next) => { saveData(from); next(); }) router.afterEach((to, from) => { loadData(to); }) ``` 其中,beforeEach方法在路由跳转前执行,利用saveData方法将当前页面数据保存下来;afterEach方法在路由跳转后执行,利用loadData方法将保存的数据加载回当前页面。 2. 编写保存和加载数据的方法,在本例中选择使用localStorage存储数据。 ```javascript function saveData(from) { localStorage.setItem('pageData', JSON.stringify(from)); } function loadData(to) { let data = localStorage.getItem('pageData'); if(data) { data = JSON.parse(data); if(to.name === data.name) { to.params = data.params; } else { localStorage.removeItem('pageData'); } } } ``` 其中,saveData方法将from对象序列化成JSON字符串存储在localStorage中;loadData方法则从localStorage中读取数据,并在to对象的params属性中存储。同时,需要注意的是只有当目标路由和源路由是同一个时才会加载数据,否则需要清除localStorage中的数据避免后续操作的干扰。 通过以上操作,即可在Vue项目中实现跳转下一级前保留当前页面数据,返回后能够正确加载的功能。

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值