首页 VueJS Vue 单个页面独立,不引用APP.VUE公共样式

Vue 单个页面独立,不引用APP.VUE公共样式

作者:胡同里的砖头 围观群众:276 更新于:2021-10-26

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】
  • 非特殊说明,本文版权归【胡同里的砖头】个人博客 所有,转载请注明出处.
留言评论
站点声明:
1、本站【胡同里的砖头】个人博客,借鉴网上一些博客模板,取其各优点模块自行拼装开发,本博客开发纯属个人爱好。
2、所有笔记提供给广大用户交流使用,可转载,可复制,纯个人开发所遇问题锦集记录使用
Copyright © huzlblog.com All Rights Reserved. 备案号:苏ICP备2021056683号-8