Mixing
Show Hide Header based on their respective home page with vuejs
.everyoneloves__top-leaderboard:empty,.everyoneloves__mid-leaderboard:empty,.everyoneloves__bot-mid-leaderboard:empty{ height:90px;width:728px;box-sizing:border-box;
}
1
By default I have header-one which can be seen in all the pages. Then there comes header-two and header-three which are only shown when there respective home pages are been opened . Is there anyway we can do by condition if the path is '/home-one' not '/home-two' and '/home-three' then show header-v1
//App.vue//
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<template>
<v-app>
<header-v1></header-v1>
<header-v2></header-v2>
<header-v3></header-v3>
<router-view></router-view>
<emb-footer-V1></emb-footer-V1>
</v-app>
</template>html vue.js
asked Jan 3 at 5:52
AishweryaAishwerya
255
add a comment |
1
By default I have header-one which can be seen in all the pages. Then there comes header-two and header-three which are only shown when there respective home pages are been opened . Is there anyway we can do by condition if the path is '/home-one' not '/home-two' and '/home-three' then show header-v1
//App.vue//
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<template>
<v-app>
<header-v1></header-v1>
<header-v2></header-v2>
<header-v3></header-v3>
<router-view></router-view>
<emb-footer-V1></emb-footer-V1>
</v-app>
</template>html vue.js
asked Jan 3 at 5:52
AishweryaAishwerya
255
add a comment |
1
1
1
1
By default I have header-one which can be seen in all the pages. Then there comes header-two and header-three which are only shown when there respective home pages are been opened . Is there anyway we can do by condition if the path is '/home-one' not '/home-two' and '/home-three' then show header-v1
//App.vue//
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<template>
<v-app>
<header-v1></header-v1>
<header-v2></header-v2>
<header-v3></header-v3>
<router-view></router-view>
<emb-footer-V1></emb-footer-V1>
</v-app>
</template>html vue.js
asked Jan 3 at 5:52
AishweryaAishwerya
255
By default I have header-one which can be seen in all the pages. Then there comes header-two and header-three which are only shown when there respective home pages are been opened . Is there anyway we can do by condition if the path is '/home-one' not '/home-two' and '/home-three' then show header-v1
//App.vue//
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<template>
<v-app>
<header-v1></header-v1>
<header-v2></header-v2>
<header-v3></header-v3>
<router-view></router-view>
<emb-footer-V1></emb-footer-V1>
</v-app>
</template>//App.vue//
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<template>
<v-app>
<header-v1></header-v1>
<header-v2></header-v2>
<header-v3></header-v3>
<router-view></router-view>
<emb-footer-V1></emb-footer-V1>
</v-app>
</template>//App.vue//
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<template>
<v-app>
<header-v1></header-v1>
<header-v2></header-v2>
<header-v3></header-v3>
<router-view></router-view>
<emb-footer-V1></emb-footer-V1>
</v-app>
</template>html vue.js
html vue.js
asked Jan 3 at 5:52
AishweryaAishwerya
255
asked Jan 3 at 5:52
AishweryaAishwerya
255
asked Jan 3 at 5:52
AishweryaAishwerya
255
asked Jan 3 at 5:52
AishweryaAishwerya
255
asked Jan 3 at 5:52
AishweryaAishwerya
255
255
add a comment |
add a comment |
1 Answer
1
active
oldest
votes
1
Several ways you could approach this using props, a route watcher, meta, etc.
Here's an example using meta on each route:
Vue.use(VueRouter)
const routes = [{
path: '/',
component: {
template: '<div>home page</div>'
}
}, {
path: '/home-one',
component: {
template: '<div>home page one</div>'
},
meta: {
header: 1
}
},
{
path: '/home-two',
component: {
template: '<div>home page two</div>'
},
meta: {
header: 2
}
},
{
path: '/home-three',
component: {
template: '<div>home page three</div>'
},
meta: {
header: 3
}
}
]
const router = new VueRouter({
routes
})
const app = new Vue({
router
}).$mount('#app')<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
<div id="app">
<h1 v-if="$route.meta.header === 1">I'm visible on home page one</h1>
<h2 v-else-if="$route.meta.header === 2">I'm visible on home page two</h2>
<h3 v-else-if="$route.meta.header === 3">I'm visible on home page three</h3>
<p>
<router-link to="/">Home</router-link>
<router-link to="/home-one">Home One</router-link>
<router-link to="/home-two">Home Two</router-link>
<router-link to="/home-three">Home Three</router-link>
</p>
<router-view></router-view>
</div>answered Jan 3 at 6:22
DigitalDrifterDigitalDrifter
8,8482825
can we make the header one disappear if we click on home Two and home three ?
– Aishwerya
Jan 3 at 7:21
can we add condition to header one as header one visible for all screen but when clicked on home two and home three there individual header shows
– Aishwerya
Jan 3 at 12:22
Can we dissapear all the three headers when scroll downwards and show the fixed header @DigitalDrifter???
– Aishwerya
Jan 3 at 12:25
@Aishwerya Sure, however that is probably better suited for a new question. You had originally asked about conditionally showing page elements depending on the current route, so if you want to post another question I would be happy to help. It also helps other find answers to their specific questions.
– DigitalDrifter
Jan 4 at 6:03
add a comment |
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f54016990%2fshow-hide-header-based-on-their-respective-home-page-with-vuejs%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
1
Several ways you could approach this using props, a route watcher, meta, etc.
Here's an example using meta on each route:
Vue.use(VueRouter)
const routes = [{
path: '/',
component: {
template: '<div>home page</div>'
}
}, {
path: '/home-one',
component: {
template: '<div>home page one</div>'
},
meta: {
header: 1
}
},
{
path: '/home-two',
component: {
template: '<div>home page two</div>'
},
meta: {
header: 2
}
},
{
path: '/home-three',
component: {
template: '<div>home page three</div>'
},
meta: {
header: 3
}
}
]
const router = new VueRouter({
routes
})
const app = new Vue({
router
}).$mount('#app')<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
<div id="app">
<h1 v-if="$route.meta.header === 1">I'm visible on home page one</h1>
<h2 v-else-if="$route.meta.header === 2">I'm visible on home page two</h2>
<h3 v-else-if="$route.meta.header === 3">I'm visible on home page three</h3>
<p>
<router-link to="/">Home</router-link>
<router-link to="/home-one">Home One</router-link>
<router-link to="/home-two">Home Two</router-link>
<router-link to="/home-three">Home Three</router-link>
</p>
<router-view></router-view>
</div>answered Jan 3 at 6:22
DigitalDrifterDigitalDrifter
8,8482825
can we make the header one disappear if we click on home Two and home three ?
– Aishwerya
Jan 3 at 7:21
can we add condition to header one as header one visible for all screen but when clicked on home two and home three there individual header shows
– Aishwerya
Jan 3 at 12:22
Can we dissapear all the three headers when scroll downwards and show the fixed header @DigitalDrifter???
– Aishwerya
Jan 3 at 12:25
@Aishwerya Sure, however that is probably better suited for a new question. You had originally asked about conditionally showing page elements depending on the current route, so if you want to post another question I would be happy to help. It also helps other find answers to their specific questions.
– DigitalDrifter
Jan 4 at 6:03
add a comment |
1
Several ways you could approach this using props, a route watcher, meta, etc.
Here's an example using meta on each route:
Vue.use(VueRouter)
const routes = [{
path: '/',
component: {
template: '<div>home page</div>'
}
}, {
path: '/home-one',
component: {
template: '<div>home page one</div>'
},
meta: {
header: 1
}
},
{
path: '/home-two',
component: {
template: '<div>home page two</div>'
},
meta: {
header: 2
}
},
{
path: '/home-three',
component: {
template: '<div>home page three</div>'
},
meta: {
header: 3
}
}
]
const router = new VueRouter({
routes
})
const app = new Vue({
router
}).$mount('#app')<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
<div id="app">
<h1 v-if="$route.meta.header === 1">I'm visible on home page one</h1>
<h2 v-else-if="$route.meta.header === 2">I'm visible on home page two</h2>
<h3 v-else-if="$route.meta.header === 3">I'm visible on home page three</h3>
<p>
<router-link to="/">Home</router-link>
<router-link to="/home-one">Home One</router-link>
<router-link to="/home-two">Home Two</router-link>
<router-link to="/home-three">Home Three</router-link>
</p>
<router-view></router-view>
</div>answered Jan 3 at 6:22
DigitalDrifterDigitalDrifter
8,8482825
can we make the header one disappear if we click on home Two and home three ?
– Aishwerya
Jan 3 at 7:21
can we add condition to header one as header one visible for all screen but when clicked on home two and home three there individual header shows
– Aishwerya
Jan 3 at 12:22
Can we dissapear all the three headers when scroll downwards and show the fixed header @DigitalDrifter???
– Aishwerya
Jan 3 at 12:25
@Aishwerya Sure, however that is probably better suited for a new question. You had originally asked about conditionally showing page elements depending on the current route, so if you want to post another question I would be happy to help. It also helps other find answers to their specific questions.
– DigitalDrifter
Jan 4 at 6:03
add a comment |
1
1
1
Several ways you could approach this using props, a route watcher, meta, etc.
Here's an example using meta on each route:
Vue.use(VueRouter)
const routes = [{
path: '/',
component: {
template: '<div>home page</div>'
}
}, {
path: '/home-one',
component: {
template: '<div>home page one</div>'
},
meta: {
header: 1
}
},
{
path: '/home-two',
component: {
template: '<div>home page two</div>'
},
meta: {
header: 2
}
},
{
path: '/home-three',
component: {
template: '<div>home page three</div>'
},
meta: {
header: 3
}
}
]
const router = new VueRouter({
routes
})
const app = new Vue({
router
}).$mount('#app')<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
<div id="app">
<h1 v-if="$route.meta.header === 1">I'm visible on home page one</h1>
<h2 v-else-if="$route.meta.header === 2">I'm visible on home page two</h2>
<h3 v-else-if="$route.meta.header === 3">I'm visible on home page three</h3>
<p>
<router-link to="/">Home</router-link>
<router-link to="/home-one">Home One</router-link>
<router-link to="/home-two">Home Two</router-link>
<router-link to="/home-three">Home Three</router-link>
</p>
<router-view></router-view>
</div>answered Jan 3 at 6:22
DigitalDrifterDigitalDrifter
8,8482825
Several ways you could approach this using props, a route watcher, meta, etc.
Here's an example using meta on each route:
Vue.use(VueRouter)
const routes = [{
path: '/',
component: {
template: '<div>home page</div>'
}
}, {
path: '/home-one',
component: {
template: '<div>home page one</div>'
},
meta: {
header: 1
}
},
{
path: '/home-two',
component: {
template: '<div>home page two</div>'
},
meta: {
header: 2
}
},
{
path: '/home-three',
component: {
template: '<div>home page three</div>'
},
meta: {
header: 3
}
}
]
const router = new VueRouter({
routes
})
const app = new Vue({
router
}).$mount('#app')<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
<div id="app">
<h1 v-if="$route.meta.header === 1">I'm visible on home page one</h1>
<h2 v-else-if="$route.meta.header === 2">I'm visible on home page two</h2>
<h3 v-else-if="$route.meta.header === 3">I'm visible on home page three</h3>
<p>
<router-link to="/">Home</router-link>
<router-link to="/home-one">Home One</router-link>
<router-link to="/home-two">Home Two</router-link>
<router-link to="/home-three">Home Three</router-link>
</p>
<router-view></router-view>
</div>Vue.use(VueRouter)
const routes = [{
path: '/',
component: {
template: '<div>home page</div>'
}
}, {
path: '/home-one',
component: {
template: '<div>home page one</div>'
},
meta: {
header: 1
}
},
{
path: '/home-two',
component: {
template: '<div>home page two</div>'
},
meta: {
header: 2
}
},
{
path: '/home-three',
component: {
template: '<div>home page three</div>'
},
meta: {
header: 3
}
}
]
const router = new VueRouter({
routes
})
const app = new Vue({
router
}).$mount('#app')<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
<div id="app">
<h1 v-if="$route.meta.header === 1">I'm visible on home page one</h1>
<h2 v-else-if="$route.meta.header === 2">I'm visible on home page two</h2>
<h3 v-else-if="$route.meta.header === 3">I'm visible on home page three</h3>
<p>
<router-link to="/">Home</router-link>
<router-link to="/home-one">Home One</router-link>
<router-link to="/home-two">Home Two</router-link>
<router-link to="/home-three">Home Three</router-link>
</p>
<router-view></router-view>
</div>Vue.use(VueRouter)
const routes = [{
path: '/',
component: {
template: '<div>home page</div>'
}
}, {
path: '/home-one',
component: {
template: '<div>home page one</div>'
},
meta: {
header: 1
}
},
{
path: '/home-two',
component: {
template: '<div>home page two</div>'
},
meta: {
header: 2
}
},
{
path: '/home-three',
component: {
template: '<div>home page three</div>'
},
meta: {
header: 3
}
}
]
const router = new VueRouter({
routes
})
const app = new Vue({
router
}).$mount('#app')<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
<div id="app">
<h1 v-if="$route.meta.header === 1">I'm visible on home page one</h1>
<h2 v-else-if="$route.meta.header === 2">I'm visible on home page two</h2>
<h3 v-else-if="$route.meta.header === 3">I'm visible on home page three</h3>
<p>
<router-link to="/">Home</router-link>
<router-link to="/home-one">Home One</router-link>
<router-link to="/home-two">Home Two</router-link>
<router-link to="/home-three">Home Three</router-link>
</p>
<router-view></router-view>
</div>answered Jan 3 at 6:22
DigitalDrifterDigitalDrifter
8,8482825
edited Jan 3 at 7:32
answered Jan 3 at 6:22
DigitalDrifterDigitalDrifter
8,8482825
answered Jan 3 at 6:22
DigitalDrifterDigitalDrifter
8,8482825
answered Jan 3 at 6:22
DigitalDrifterDigitalDrifter
8,8482825
8,8482825
can we make the header one disappear if we click on home Two and home three ?
– Aishwerya
Jan 3 at 7:21
can we add condition to header one as header one visible for all screen but when clicked on home two and home three there individual header shows
– Aishwerya
Jan 3 at 12:22
Can we dissapear all the three headers when scroll downwards and show the fixed header @DigitalDrifter???
– Aishwerya
Jan 3 at 12:25
@Aishwerya Sure, however that is probably better suited for a new question. You had originally asked about conditionally showing page elements depending on the current route, so if you want to post another question I would be happy to help. It also helps other find answers to their specific questions.
– DigitalDrifter
Jan 4 at 6:03
add a comment |
can we make the header one disappear if we click on home Two and home three ?
– Aishwerya
Jan 3 at 7:21
can we add condition to header one as header one visible for all screen but when clicked on home two and home three there individual header shows
– Aishwerya
Jan 3 at 12:22
Can we dissapear all the three headers when scroll downwards and show the fixed header @DigitalDrifter???
– Aishwerya
Jan 3 at 12:25
@Aishwerya Sure, however that is probably better suited for a new question. You had originally asked about conditionally showing page elements depending on the current route, so if you want to post another question I would be happy to help. It also helps other find answers to their specific questions.
– DigitalDrifter
Jan 4 at 6:03
can we make the header one disappear if we click on home Two and home three ?
– Aishwerya
Jan 3 at 7:21
can we make the header one disappear if we click on home Two and home three ?
– Aishwerya
Jan 3 at 7:21
can we add condition to header one as header one visible for all screen but when clicked on home two and home three there individual header shows
– Aishwerya
Jan 3 at 12:22
can we add condition to header one as header one visible for all screen but when clicked on home two and home three there individual header shows
– Aishwerya
Jan 3 at 12:22
Can we dissapear all the three headers when scroll downwards and show the fixed header @DigitalDrifter???
– Aishwerya
Jan 3 at 12:25
Can we dissapear all the three headers when scroll downwards and show the fixed header @DigitalDrifter???
– Aishwerya
Jan 3 at 12:25
@Aishwerya Sure, however that is probably better suited for a new question. You had originally asked about conditionally showing page elements depending on the current route, so if you want to post another question I would be happy to help. It also helps other find answers to their specific questions.
– DigitalDrifter
Jan 4 at 6:03
@Aishwerya Sure, however that is probably better suited for a new question. You had originally asked about conditionally showing page elements depending on the current route, so if you want to post another question I would be happy to help. It also helps other find answers to their specific questions.
– DigitalDrifter
Jan 4 at 6:03
add a comment |
draft saved
draft discarded
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f54016990%2fshow-hide-header-based-on-their-respective-home-page-with-vuejs%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
