Vue single page application Put public components but I want a certain page to have no public components (such as login page) Each page has a navigation bar, but I want the login page to have only one background color and a login box without a navigation bar. So how should I set it?
vue Chinese documentation:Click to enter
In the root component: Use v-show in the navigation bar to determine whether the current route is an unwanted component to complete the page:
<template>
<div >
<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,
},
//Judge routing mounted() {
= this.$;
// (this.$)
},
watch:{
$route(to,from){
=
}
}
}
</script>
<style>
</style>
Use = the route of the current page in mounted(){} and then use watch to monitor the changes
Supplementary knowledge:How do you need to control the components registered in it and then not display them on the homepage? When vue switches routes, where can we monitor route changes?
The requirements are as follows:
In addition to the home page, a [Return navigation bar] must be displayed on each page.
So the question is, how to control the display and hiding of the home page return navigation bar.
Ideas:
In the [Return Navigation Bar] component, listen for the changes in the route and then make judgments in the monitor.
Code:
<template>
<div 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() {
('Clicked back')
this.$(-1);
}
},
watch:{
'$route':function(){
that = this;
('Watch inside',that.$);
if(that.$ == 'HomeNew'){
= false;
}else{
= 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>
------over.
The above article solves the problem that a page in the vue project does not want to quote public components is all the content I share with you. I hope it can give you a reference and I hope you can support me more.