时间戳

首页 > 解决方案 > 在路线更改时停止整页重新渲染？(Nuxt.js)

vue.js - 在路线更改时停止整页重新渲染？(Nuxt.js)

问题描述

我正在尝试使用_.vue在 Nuxt 中实现自定义路由。我的 _.vue 页面文件有两个子组件（我们称它们为 Category 和 Product），每个子组件都会在它们的数据存在于 store 中时使用 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>

标签： vue.jsnuxt.js

解决方案

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

推荐阅读