停止更改路线时重新渲染整个页面？ （Nuxt.js）

Question

我正在尝试使用 _。vue 在Nuxt中实现custom routing。我的_.vue页面文件有两个子组件（我们分别称为“类别”和“产品”），当使用v-if将它们的数据显示在商店中时，将显示每个子组件。我正在使用_.vue组件的中间件来处理自定义路由。

我的问题是，每次更改路线时，我的所有组件都会重新渲染，这会导致延迟和图像闪烁。

让我解释一下我要达到的目标。有一个类别中的产品列表。当您单击产品时，它会在模式窗口中打开，类别仍在后台，并且还会更改当前页面的URL，从而更改路由内容。关闭产品时，它应返回到与以前相同的状态类别。一切似乎都可以根据需要运行，除非当我打开或关闭产品时，我所有的组件组件都被重新渲染（包括_.vue）。我尝试使用key（）等命名它们，但没有结果。

有什么方法可以使当前组件保持路由更改而无需重新渲染？还是有解决方法？

<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>

Answer 1

您应该在页面组件中使用“键”选项。默认情况下，值为“ route.fullPath”，因此您会在更改URL参数后看到重新呈现。 https://nuxtjs.org/docs/2.x/features/nuxt-components#the-nuxt-component