关于一个vue单页面菜单的问题

Question

我的问题是：

先来张图，不知道你们能否看懂

就像这样一张图 首先我的需求是这样的 上面head 部分有几个导航菜单 点击不同的菜单按钮

NAV(导航侧边栏)都要根据点击的按钮而改变菜单 上面的菜单不变 变的是下面的NAv和MAIN的内容

请问我用VUE的单页面 router 怎么实现比较优雅

Answer 1

说下我的思路：

把一级及二级菜单放在一级路由中。原因是一级菜单基本上不会变，第一次进来就显示那几个一级菜单，只有一个变化就是切换一级菜单，显示不同的二级菜单。而 MAIN 区域只要随着二级菜单变化显示不同的内容即可。

写段示例，你体会一下：

// layout.vue 主文件
<template>
    <div>
        <first-menu></first-menu>
        <second-menu></second-menu>
        <main>
            <router-view />
        </main>
    </div>
</template>

// router.js 路由配置
new Router({
    routers: [{
        path: '/firstMenu1',
        component: Layout, // layout.vue
        children: [{
            path: '/firstMenu1/secondMenu1',
            component: Main1  // 二级路由显示的内容组件
        }, {
            path: 'firstMenu1/secondMenu2',
            component: Main2  // 二级路由显示的内容组件
        }]
    }, {
        path: '/firstMenu2',
        component: Layout,  // layout.vue
        children: [{
            path: '/firstMenu2/secondMenu3',
            component: Main3  // 二级路由显示的内容组件
        }, {
            path: 'firstMenu2/secondMenu4',
            component: Main4  // 二级路由显示的内容组件
        }]
    }]
})

Answer 2

一级路由，比如说是 menu 放在一个组件，剩下的内容放在 它的 子路由下面，路由就成了 menu/a , menu/b 这种形式了

Answer 3

/a ,/b ,/c ,/d
/a/a1 ,/b/b1 ..
/a/a2 ,/b/b1 ..
自己领悟

Answer 4

使用vuex，跨组件共享数据