vue路由实现多视图的单页应用

提示：扫一扫查出行
【扫一扫了解最新限行尾号】
复制提示

多视图的单页应用：在一个页面中实现多个页面不同切换，url也发生相应变化。

router-view结合this.$router.push("/pickUp")实现，

实现效果：

实现代码：

1.系统上下作为一个整体，在点击顶部的时候，跳转至对应的下部路由，顶部的每个菜单都会有他自己的下部，可以分为侧部和中间，也可以仅为单个页面。

home：包含顶部和下部整体，通过router-view

顶部nav：顶部菜单和对应的点击事件，跳转至对应下部的路由

<Menu mode="horizontal" class="navMainWrapper" theme="dark" :active-name="setActive" :default-active="onRoutes" @on-select="routeTo">
<Menu-item name="pickUp">
<Icon type="ios-people"></Icon>
第一个
</Menu-item>
<Menu-item name="acquisition">
<Icon type="ios-paper"></Icon>
第二个
</Menu-item>
<Menu-item name="analyse">
<Icon type="ios-people"></Icon>
地上那个
</Menu-item>
<Menu-item name="manage" >
<Icon type="ios-people"></Icon>
地下哪个
</Menu-item>
</Menu>routeTo(e) {
this.$router.push(e);
},

router.js：顶部每个菜单点击对应的下部各自作为一个整体，里面包含自己的children，即自己侧部菜单跳转的路由。

{
path: '/readme',
component: resolve => require(['../components/home.vue'], resolve),
children: [
{path: '/acquisition', meta: {requireAuth: true}, component: resolve => require(['../components/acquisition/acquisition.vue'], resolve)},
{path: '/module', meta: {requireAuth: true}, component: resolve => require(['../components/module.vue'], resolve)},
{path: '/pickUp',meta: {requireAuth: true}, component: resolve => require(['../components/pickUp/pickUp.vue'], resolve)},
{path: '/analyse',meta: {requireAuth: true}, component: resolve => require(['../components/analyse/analyse.vue'], resolve),
children: [
{path: '/searchPeople',meta: {requireAuth: true}, component: resolve => require(['../components/analyse/searchPeople.vue'], resolve)},
{path: '/identify',meta: {requireAuth: true}, component: resolve => require(['../components/analyse/identify.vue'], resolve)},
{path: '/hisIdentify',meta: {requireAuth: true}, component: resolve => require(['../components/analyse/hisIdentify.vue'], resolve)}
]
},
{path: '/manage',meta: {requireAuth: true}, component: resolve => require(['../components/manage/manage.vue'], resolve),
children: [
{path: '/',meta: {requireAuth: true}, component: resolve => require(['../components/manage/users.vue'], resolve)},
{path: '/users',meta: {requireAuth: true}, component: resolve => require(['../components/manage/users.vue'], resolve)},
{path: '/setUp',meta: {requireAuth: true}, component: resolve => require(['../components/manage/setUp.vue'], resolve)},
{path: '/core',meta: {requireAuth: true}, component: resolve => require(['../components/manage/core.vue'], resolve)}
]
}
]
},
{
path: '/login', component: resolve => require(['../components/login.vue'], resolve)
}