Vue 单网页应用 把公共组件放在 app.vue 但是我希望某个网页没有这些公共组件如何办(比如登录网页)每个网页都有 导航栏 但是我希望 登录网页只有一个背景色和一个登录框 没有导航栏 那应该怎样设置呢?

vue中文文档：点击进入

在根组件中：在导航栏使用v-show判断当前路由是否是不需要的组件来完成网页：

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

}

}

}

在mounted(){}中使用this.path=当前网页的路由然后使用watch监测变化

补充知识：在app.vue里面注册的组件，然后想在首页不显示，需要怎样控制呢？vue切换路由的时候，在哪儿监控路由变化呢？

需求是这样的：

除了首页之外，每个网页上都要显示一个【返回的导航栏】。

那么问题来了，怎样控制首页返回导航栏的显示与隐藏呢。

思路：

在【返回的导航栏】组件里面，监听路由的变化，然后在监听里面进行判断就行了。

代码：

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;

}

}

}

}

.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%;

}

------完。

以上这篇解决vue项目中某一网页不想引用公共组件app.vue的问题就是小编共享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持乐购源码。