Vue 单页面应用 把公共组件放在 app.vue 但是我希望某个页面没有某些公共组件怎么办?
在根组件中:在导航栏使用v-show判断当前路由是否是不需要的组件来完成页面:
<template>
<div id="app">
<van-nav-bar style="margin-bottom:30px" v-show="!(path==='/login')" //设置login页面不显示该控件
title="标题"
left-text="返回"
right-text="按钮"
left-arrow
@click-left="onClickLeft"
@click-right="onClickRight"
/>
<router-view/>
</div>
</template>
<script>
export default {
name: 'App',
data(){
return{path:''}
},
mounted(){
this.path=this.$route.path;//获取当前的路由
},
watch:{ //监听路由变化
$route(to,from){
this.path=to.path //打开的新页面路由
}
}
}
</script>
- 本文标题: Vue 单个页面独立,不引用APP.VUE公共样式
- 文章分类:【VueJS】
- 非特殊说明,本文版权归【胡同里的砖头】个人博客 所有,转载请注明出处.