javascript - 如何防止或停止父组件在 vuejs 中重新渲染

Question

大家好，我正在尝试创建类似于 Bootstrap Nav Tabs 的外观，但是使用 Vuejs 和 Vue Router 我还想更改浏览器中的 url
这是我的 VueRouter 代码

它工作正常，但每次我在 UserProfilePosts 或 UserDetails 之间切换时，父组件(UserProfile)都会重新呈现，因为我知道我的代码会更大，这不是一个好的用户体验，谢谢

{
    path:'/:id',
    component:UserProfile,
    children: [
        { path: '', component: UserProfilePosts },
        { path: 'details', component: UserDetails },
    ],
    meta:{
        requiresAuth:true
    }
}

主要组件(用户配置文件):

<template>
<div class="container-fluid">
<h1>UserProfile</h1>
    <router-link to="/username">Post's</router-link>
<router-link to="/username/details">Details</router-link>
<router-view></router-view>
</div>

<script>
export default{
    created(){
        console.log('created');
    }
}</script>

Answer 1

您可以尝试将 Vuex 与 vex-persist 结合使用。每次询问时，Vue 都会刷新并重新加载 html。我是 vue 的新手，这就是我实现它的方式，尽管它可能不是最好的解决方案。

VueX 是您的组件可以查找信息的唯一核心事实来源。作为 prop 传递起来会更容易，所有组件都可以前往“商店”获取信息

这会将信息存储为本地/ session 存储。有关更多信息，请查看:https://github.com/championswimmer/vuex-persistuex-persist

import Vue from 'vue'    
import Vuex from 'vuex'
import VuexPersistence from 'vuex-persist'

const vuexLocal = new VuexPersistence({
  storage: window.sessionStorage
})

Vue.use(Vuex)
export default new Vuex.Store({
  plugins: [vuexLocal.plugin],
  state: {
    database: []
  },
  mutations: {
    pushToDatabase: (state, val) => { 
        state.database.push (val}
    }
  },
  getters: {
    getData: state => {
        return state.database
    }
  }
})