描述一下:由于之前一直使用Vue都是配置单页面,导致只需要路由跳转就可以了。而今天做跳转时,一头懵。每次都是切换页面,导致我的导航栏每次都是初始化状态。还傻里傻气的每个子级都引用布局组件。(真他妈蠢,想想都醉了)
在做单页面路由时,只需要配置一个跳转路由方式,name或者path (router-link,this.$router.push())等方式。
而在非单页里面:其他内容保持一致,只需要内容切换时。嵌套路由少不了使用。但是第一次用,不熟练还是有很多疑问。尝试理解了下。顺便记录一下,养成习惯。
第一步:
写一个布局页。也就是固定栏目,(导航栏,个人信息栏目啥的),留出一个内容显示区域,里面放上<router-view/>
<template>
<a-layout id="components-layout-demo-custom-trigger">
<!-- PC Menu -->
<a-layout-sider :trigger="null" collapsible v-model="collapsed" width="256px" class="AdaptiveMenuPC">
<global-Menu :showTitle="collapsed"></global-Menu>
</a-layout-sider>
<!-- iPad Menu -->
<div class="AdaptiveMenuPhone">
<iPad-Menu ref="Ipad" :visible="visible"></iPad-Menu>
</div>
<a-layout>
<!-- 头部 -->
<a-layout-header style="background: #fff; padding: 0">
<a-row>
<a-col :span='21'>
<div class="AdaptiveMenuPCIcon">
<a-icon class="trigger" :type="collapsed ? 'menu-unfold' : 'menu-fold'" @click="()=> collapsed = !collapsed" />
</div>
<div class="AdaptiveMenuPhoneIcon">
<a-icon class="trigger" type="menu-unfold" @click="showDrawer"/>
</div>
</a-col>
<!--个人中心 等等-->
<a-col >
<div class="fonts">123</div>
</a-col>
</a-row>
</a-layout-header>
<!-- 面包屑 描述 -->
<!--<GlobalPage-Header>
</GlobalPage-Header>-->
<!-- 中间内容 --> <!--background: '#fff',-->
<a-layout-content :style="{ margin: '24px 16px', padding: '24px', minHeight: '280px' }">
<!-- 子级路由区 -->
<router-view></router-view>
</a-layout-content>
<!-- 底部版权 -->
<a-layout-Footer>
<global-Footer></global-Footer>
</a-layout-Footer>
</a-layout>
</a-layout>
</template>
<script>
import globalMenu from '@/components/pages/GlobalMenu'
import globalFooter from '@/components/pages/GlobalFooter'
import iPadMenu from '@/components/pages/iPadMenu'
import GlobalPageHeader from '@/components/pages/GlobalPageHeader'
export default {
data(){
return {
collapsed: false,
screenstate:false,
visible:false
}
},
mounted(){
console.log(document.body.clientWidth)
},
methods:{
/**
* 调用非PC端 Menu导航栏的子级方法,
*/
showDrawer(){
this.$refs.Ipad.showDrawer()
}
},
components:{
globalMenu,
globalFooter,
iPadMenu,
GlobalPageHeader
}
}
</script>
<style>
#components-layout-demo-custom-trigger .trigger {
font-size: 18px;
line-height: 64px;
padding: 0 24px;
cursor: pointer;
transition: color .3s;
}
#components-layout-demo-custom-trigger .trigger:hover {
color: #1890ff;
}
#components-layout-demo-custom-trigger .logo {
height: 62px;
background: #002140;
display:flex;
}
@media only screen and (max-width:1024px ) {
.AdaptiveMenuPC{
display: none;
}
.AdaptiveMenuPCIcon{
display: none;
}
.fonts{
color: red;
}
}
@media only screen and (min-width: 1025px) {
.AdaptiveMenuPhone{
display: none;
}
.AdaptiveMenuPhoneIcon{
display: none
}
.ant-drawer{
display: none
}
.fonts{
color: deeppink;
}
}
</style>
第二:路由
import Vue from 'vue'
import Router from 'vue-router'
import globalLayout from '@/components/pages/GlobalLayout'
Vue.use(Router)
export default new Router({
routes: [
{// 父级路由,试着这样理解一下
path:'/',
name:'index',
component:globalLayout,
meta: { title: '首页' },
redirect: '/dashboard/ChartDish',
children: [//子级路由
{
path: '/dashboard/ChartDish',
name: 'ChartDish',
component: ()=>import('@/views/dashboard/ChartDish'),
meta: { title: '图表盘' },
},
{
path: '/dashboard/Workbench',
name: 'Workbench',
component: ()=>import('@/views/dashboard/Workbench'),
meta:{ title:'工作台' }
},
{
path: '/403',
name: '403',
component: ()=>import('@/views/exception/403')
},
{
path: '/404',
name: '404',
component: ()=>import('@/views/exception/404')
},
{
path: '/500',
name: '500',
component: ()=>import('@/views/exception/500')
},
]
},
]
})
第三步:跳转试试。
<template>
<div style="position: absolute;">
<a-layout-sider :trigger="null" width="256px" >
<a-drawer
placement="left"
:closable="false"
@close="onClose"
:visible="ipadVisible"
width="256px"
>
<div style="width: 256px; height: 64px; background:#002140 ;display: flex;">
<img src="../../assets/logo.svg" style="width: 30px; margin-left: 25px; margin-top: 0px;" ></img>
<span style="margin-top: 15px; margin-left: 5px; font-size:20px; color: #ffffff; font-weight: 600;">Ant Design System</span>
</div>
<a-menu theme="dark" mode="inline" :defaultSelectedKeys="['1']" :openKeys="openKeys" @openChange="onOpenChange">
<a-sub-menu key="sub1">
<span slot="title"><a-icon type="mail" /><span>控制台1</span></span>
<a-menu-item key="1"><router-link :to="{name:'ChartDish'}"></router-link>图表页</a-menu-item>
<a-menu-item key="2"><router-link :to="{name:'Workbench'}"></router-link>工作台</a-menu-item>
<a-menu-item key="3">测试 3</a-menu-item>
<a-menu-item key="4">测试 4</a-menu-item>
</a-sub-menu>
<a-sub-menu key="sub2">
<span slot="title"><a-icon type="appstore" /><span>控制台2</span></span>
<a-menu-item key="5">测试 5</a-menu-item>
<a-menu-item key="6">测试 6</a-menu-item>
<a-sub-menu key="sub3" title="Submenu">
<a-menu-item key="7">测试 7</a-menu-item>
<a-menu-item key="8">测试 8</a-menu-item>
</a-sub-menu>
</a-sub-menu>
<a-sub-menu key="sub4">
<span slot="title"><a-icon type="setting" /><span>异常页</span></span>
<a-menu-item key="9"><router-link :to="{name:'403'}"></router-link>403</a-menu-item>
<a-menu-item key="10"><router-link :to="{name:'404'}"></router-link>404</a-menu-item>
<a-menu-item key="11"><router-link :to="{name:'500'}"></router-link>500</a-menu-item>
</a-sub-menu>
</a-menu>
</a-drawer>
</a-layout-sider>
<!--<div class="test-f">字体</div>-->
</div>
</template>
<script>
export default {
data() {
return {
ipadVisible: false, //由于props传递过来的值,不可被改变,否则会抛出异常,所以我们赋值给一个变量
rootSubmenuKeys: ['sub1', 'sub2', 'sub4'],
openKeys: ['sub1'],
}
},
mounted(){
this.ipadVisible=this.visible
},
methods: {
showDrawer() {
this.ipadVisible = true
},
onClose() {
this.ipadVisible = false
},
/**
* 展开二级Menu目录是关闭其他目录
*/
onOpenChange (openKeys) {
const latestOpenKey = openKeys.find(key => this.openKeys.indexOf(key) === -1)
if (this.rootSubmenuKeys.indexOf(latestOpenKey) === -1) {
this.openKeys = openKeys
} else {
this.openKeys = latestOpenKey ? [latestOpenKey] : []
}
},
},
watch: {
},
props:{
visible:{
type:Boolean,
default:false,
},
}
}
</script>
<style>
.ant-drawer-wrapper-body{
background: #001529;
}
.ant-drawer-body{
padding:0px;
}
.ant-drawer-header{
height: 64px;
background: #002140;
border: 0px ;
border-radius: 0px;
}
</style>
附:
栏目区域始终保持不变,而内容区跟随路由跳转。