![](/img/trans.png)
[英]How to prevent parent component re-render when child component triggers a state change to parent
[英]how to prevent or stop parent component to re-render in vuejs
嗨,大家好,我正在尝试创建类似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
}
}
主要组件(UserProfile):
<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>
您可以尝试将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
}
}
})
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.