Question

嗨，我正在尝试创建类似Bootstrap Nav Tabs的外观，但是使用Vuejs和Vue Router，我也想在浏览器中更改网址
这是我的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向下传递会更容易，所有组件都直接进入“商店”以获取信息

这会将信息存储为本地/会话存储。有关更多信息，请查看：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
    }
  }
})

如何防止或阻止父组件在vue.js中重新渲染

1 个答案: