Problems encountered:
Recently, I am using Vue+elementUI to develop a website's front-end. The logic of the website is that users without an account register first, and users with an account log in directly, and only after logging in can they enter the home page of the website. When designing the navigation bar, considering that you cannot browse the website before logging in, you need to not appear on the login page and registration page, so the navigation bar can only appear on the page after logging in.
To summarize:
The specific requirement is that some pages display the navigation bar, while others do not display it, that is, the pages that display the navigation bar are customized.
Solution:
1. Create a navigation bar code first
<template>
<div>
<el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal">
<el-menu-item index="1">
<router-link to="/homepage">
<span>front page</span>
</router-link>
</el-menu-item>
<el-menu-item index="2">
<router-link to="/composevideo">
<span>Synthesized video</span>
</router-link>
</el-menu-item>
<el-menu-item index="3" disabled>
<router-link to="/">
<span>Video circle</span>
</router-link>
</el-menu-item>
<el-menu-item index="4">
<router-link to="/useguide">
<span>User Guide</span>
</router-link>
</el-menu-item>
<el-menu-item index="5">
<router-link to="/personalcenter">
<span>Personal Center</span>
</router-link>
</el-menu-item>
</el-menu>
</div>
</template>
<script>
export default {
name: "Header"
}
</script>
<style scoped>
/*Control router-link*/
a {
text-decoration: none;
color: #000000;
font-family: sans-serif;
font-size: 14px;
}
</style>
2. Then import this navigation in
Introduced in, and then used to control whether the head navigation bar is displayed
<template>
<div >
<div v-if="$">
<header-nav></header-nav>
<router-view></router-view>
</div>
<div v-if="!$">
<router-view></router-view>
</div>
</div>
</template>
<script>
import header from '@/views/Header';
export default{
components: {
headerNav: header,
}
}
</script>
3. Modify the router/
In the previous article, the meta attribute was added to assign a value to keepAlive. The assignment of the head navigation is true, and the non-necessary one is false.
Some of the codes are as follows:
const routes = [
{
path: '/',
name: 'Login',
component: Login,
meta:{
keepAlive: false
}
},
{
path: '/register',
name: 'Register',
component: Register,
meta:{
keepAlive: false
}
},
{
path: '/homepage',
name: 'Homepage',
component: Homepage,
meta:{
keepAlive: true
}
}
]
This is the article about the navigation bar display on the custom Vue page. For more related Vue navigation bar content, please search for my previous articles or continue browsing the related articles below. I hope everyone will support me in the future!