解决vue项目中某一页面不想引用公共组件app.vue的问题
2020-08-15 04:08
1231 查看
Vue 单页面应用 把公共组件放在 app.vue 但是我希望某个页面没有这些公共组件怎么办(比如登陆页面)每个页面都有 导航栏 但是我希望 登陆页面只有一个背景色和一个登陆框 没有导航栏 那应该怎样设置呢?
vue中文文档:点击进入
在根组件中:在导航栏使用v-show判断当前路由是否是不需要的组件来完成页面:
<template> <div id="app"> <home-header v-show="!(path ==='/') "></home-header> <home-aside v-show="!(path ==='/')"></home-aside> <router-view/> </div> </template> <script> import HomeHeader from './components/header/Header' import HomeAside from './components/aside/Aside' export default { name: 'App', data(){ return{ path:'' } }, components: { HomeHeader, HomeAside, }, // 判断路由 mounted() { this.path = this.$route.path; // console.log(this.$route.path) }, watch:{ $route(to,from){ this.path = to.path } } } </script> <style> </style>
在mounted(){}中使用this.path=当前页面的路由然后使用watch监测变化
补充知识:在app.vue里面注册的组件,然后想在首页不显示,需要怎样控制呢?vue切换路由的时候,在哪儿监控路由变化呢?
需求是这样的:
除了首页之外,每个页面上都要显示一个【返回的导航栏】。
那么问题来了,怎样控制首页返回导航栏的显示与隐藏呢。
思路:
在【返回的导航栏】组件里面,监听路由的变化,然后在监听里面进行判断即可。
代码:
<template> <div id="back" v-if="isShowBack"> <div class="back_box" @click="toBack()"> <span class="left_arrow"> <img src="../../../static/images/icon_arrow_bottom_left.png" /> </span> </div> </div> </template> <script> var that; export default { data() { return { msg: '', isShowBack:false } }, methods: { toBack() { console.log('点击了返回') this.$router.go(-1); } }, watch:{ '$route':function(){ that = this; console.log('watch里面',that.$route.name); if(that.$route.name == 'HomeNew'){ that.isShowBack = false; }else{ that.isShowBack = true; } } } } </script> <style scoped="scoped"> .back_box { width: 100%; height: 30px; background: #f1f1f1; } .left_arrow { width: 22px; display: inline-block; transform: rotate(90deg); margin-top: 4px; margin-left: 4px; } .left_arrow img { width: 100%; } </style>
------完。
以上这篇解决vue项目中某一页面不想引用公共组件app.vue的问题就是小编分享给大家的全部内容了,希望能给大家一个参考
您可能感兴趣的文章:
相关文章推荐
- 利用HBuilder将vue项目打包成移动端app,运行页面空白问题解决
- 今天解决了 项目中已经存在对组件“XXX”的引用 的小问题
- vue如何解决循环引用组件报错的问题
- 解决webpack打包 vue项目 app.js和vendor.js过大问题解决
- Nginx部署Vue项目以及解决刷新页面404问题
- Vue 2.0在IE11中打开项目页面空白的问题解决
- Vue 2.0在IE11中打开项目页面空白的问题解决
- vue 解决路由只变化参数页面组件不更新问题
- 解决Vue项目打包后打开index.html页面显示空白以及图片路径错误的问题
- 解决在Vue项目中时常因为代码缩进导致页面报错的问题
- 解决element-ui中el-menu组件作为vue-router模式在刷新页面后default-active属性与当前路由页面不一致问题的方法
- vue 解决循环引用组件报错的问题
- vue 项目中,App.vue单文件组件代码是黑白色的解决方法
- vue页面在微信浏览器下拉出现网址的解决,并兼容小米8内置浏览器等浏览器页面到底不能滑动问题(因为app也用到了这个页面)
- IE浏览器访问Vue项目空白页面问题解决
- 解决VS2008中Web项目中 App_Code中类无法引用的问题
- web页面嵌入应用中遇到的 Object.entries is not a function 问题的解决(vue项目)
- 编译.NET项目提示“找不到系统命名空间,请添加系统组件的引用”问题的解决方法(该组件已被该项目正确引用)
- vue多项目引用公共组件包传送门
- vue引用vue-ueditor-wrap组件,一个页面要多次渲染UEditor编辑器时,v-mode绑定失效,v-mode值改变编辑器内容不改变解决方式