Issue with back button and cordova

Questions
1

Hello, I have a problem with navigating back using the f7router; following code:

 document.addEventListener('backbutton', () => {
   app.$f7.router.back('', {
                force: true,
                ignoreCache: true,
                history: false
    })
}, false);

I have a route named category that fetches products using the :category param,

{
    name: 'category',
    path: '/category/:category',
    reloadAll: true,
    reloadCurrent: true,
    reloadPrevious: true,
    meta: {
        title: false,
        hideNav: false,
        requiresCode: true
    },
    component: CategoryPage
},

My category.vue page:

import CategoryComponent from '../components/products/CategoryComponent'

export default {
    components: {
        categoryComponent: CategoryComponent
    },
    methods: {
        setOnCategory () {
            this.$store.commit('setOnCategory', {
                name: this.$f7route.params.category,
                loadProducts: true
            })
        }
    },
    mounted () {
        this.setOnCategory()
    }
}

Products are loaded just fine, and when I navigate between categories they are also shown perfectly fine, however when I hit the back button on the device, it goes back to the correct route but it displays products from a previous route, it doesn’t show the right products, even though I’m on the correct route!

2 
   on: {
    pageBeforeIn:function() {
     somemethods
    },

or

   on: {
    pageBeforeOut:function() {
     somemethods
    },

maybe ?

1 Like
3

@edoofx is right, it is better to use pageBeforeIn here, because when you have two category pages opened, you can mess up with Vuex store, or need some better current page’s store tracking to prevent it from overwriting by other page data

4

Thank you both! It works now!

1 Like