router.js routing section
export const normalRouter = {
path: "/",
meta: {
login: false
},
component: () => import("@/views/normal/home"),
redirect: "/pagelist",
children: [
{
name: "normalPageList",
component: () => import("@/views/normal/pagelist"),
path: "pagelist",
meta: {
login: false,
title: ""
},
},
{
name: "normalTagList",
path: "categories",
meta: {
login: false,
title: ""
},
components: () => import("@/views/normal/tagList")
},
{
name: "normalmyPageList",
path: "myPageList",
meta: {
login: true,
title: ""
},
components: () => import("@/views/normal/myPageList")
},
{
name: "normalGuestBook",
components: () => import("@/views/normal/guestBook"),
path: "guestbook",
meta: {
login: true,
title: ""
},
}
]
}header component blogHeader.vue
<div class="site-nav">
<ul class="menu">
<li v-for="(route, i) in routes.children" :key="i" class="menu-item">
<router-link :to="{name: route.name}">{{ route.meta.title }}</router-link>
</li>
</ul>
<div class="site-search">
<form class="site-search-form">
<Icon type="search" class="search-icon" size="22" color="-sharp222"></Icon>
<input class="search-input"></input>
</form>
</div>
</div>display page home.vue
<Layout :style="{minHeight: "100vh"}">
<Header :style="{padding: 0, background: "-sharpf5f5f5", height: "auto"}" class="layout-header-bar">
<blog-header @on-change="handleRouter"></blog-header>
</Header>
<Content :style="{background: "-sharpfff", minHeight: "260px"}">
<router-view :style="{marginTop: "80px auto 0", width: "90%"}"></router-view>
<!-- <router-view></router-view> -->
</Content>
</Layout>Page display
Home
