本来我是想用这种:
<template>
<div id="app">
<router-view v-if="isShow"/>
</div>
</template>
<script>
export default {
name: 'App',
provide(){
return{
reload:this.reload
}
},
data(){
return{
isShow:true
}
},
methods:{
reload(){
this.isShow=false;
this.$nextTick(()=>{
this.isShow=true
})
}
}
}
</script>
子孙页面 inject
接收 reload()
方法实现
但是nuxt的页面是这样的:
<template>
<div ref="tsRoot">
<divBanner ref="tsHeader" v-if="$store.state.banner"></divBanner>
<divHeader ref="tsHeader" v-if="$store.state.headers"></divHeader>
<divLogin ref="tsLogin" v-if="$store.state.login"></divLogin>
<nuxt ref="tsNuxt"/>
<divFooter v-if="$store.state.footers"></divFooter>
</div>
</template>
<script>
import divBanner from '~/components/banner.vue'
import divHeader from '~/components/headers.vue'
import divFooter from '~/components/footers.vue'
import divLogin from '~/components/login.vue'
export default {
components: {
divBanner,
divHeader,
divFooter,
divLogin
}
}
</script>
这个路径是 /layout/default.vue
属于布局, <nuxt ref="tsNuxt"/>
这个就相当于普通vue的 <router-view />
,我按照上面普通vue的写法写了一下,哪怕 isShow
设置为 false
,这个也false
不掉。难道是因为已经生成静态页了?(不知道有没有大神能看到这篇,路见不平,为在下解释一二…)
nuxtChildKey
这个属性我也没看太懂 链接
然后普通vue的几种刷新方法网上都有
我用的跳转新页面再跳回来的那种
/*业务页面*/
//切换省市
locationChange(val) {
this.$store.commit("setCity", val)
this.$router.push({path: "/transitUtil"})
},
/*空白页面 /transitUtil */
<template>
<div>
</div>
</template>
<script>
export default {
name: "transitUnit",
auth: false,
beforeRouteEnter(to, from, next){
next(vm => {
vm.$router.replace({path: from.fullPath})
})
}
}
</script>