1

I'm trying to implement custom routing in Nuxt using _.vue. My _.vue page file has two child components (let's call them Category and Product), each of which is displayed when their data is present in the store by using v-if. I'm using middleware for the _.vue component to process custom routing.

My problem is that all my components get re-rendered on each route change, which causes delays and image flickering.

Let me explain what I'm trying to achieve. There's a list of products in a category. When you click on a product, it opens in a modal window with the category still in the background, and also changes the current page URL, hence the routing thing. When you close the product, it should go back to the category in the same state as before. Everything seems to be working as needed, except when I open or close a product, all my components components get re-rendered (including _.vue). I tried naming them, using key(), etc. with no results.

Is there any way to keep current components on route change without rerendering? Or is there a workaround?

<template>
    <div>
        <Category v-if="current_category" />
        <Product v-if="current_product" />
    </div>
</template>
<script>
import {mapState} from 'vuex'
import Product from '~/components/product/Product'
import Category from '~/components/category/Category'

export default {
    middleware: 'router',
    scrollToTop: false,

    components: {
        Product,
        Category,
    },

    computed: {
        ...mapState({
            current_category: state => state.current_category,
            current_product: state => state.current_product,
        }),
    },

    mounted: function() {
        console.log('_ component mounted')
    },
}
</script>
Igor Gusarov
  • 11
  • 1
  • 3

1 Answers1

0

You should use "key" option in page components. By default value is "route.fullPath", so you see rerendering after changing URL parameters. https://nuxtjs.org/docs/2.x/features/nuxt-components#the-nuxt-component

UJin
  • 5
  • 6