3、制作左右结构导航首页

网站功能建议：
https://wenku.baidu.com/view/bc1927ebbceb19e8b9f6ba39.html
https://baike.baidu.com/item/%E5%90%8E%E5%8F%B0%E7%AE%A1%E7%90%86%E7%B3%BB%E7%BB%9F/2074354?fr=aladdin
https://www.oschina.net/news/114293/ruoyi-4-2-released

目标

• 期待效果
• layout.vue布局页面开发
• 嵌套路由
• NavMenu 导航菜单
• 测试

期待效果

左侧导航，右侧显示导航到的url内容

image.png

第一步 Index.vue布局页面开发

后在Index.vue中运用Element UI Container 布局容器组件。

image.png

代码如下：

目前效果

image.png

Container说明

Container，用于布局的容器组件，方便快速搭建页面的基本结构：
：外层容器。当子元素中包含 或 时，全部子元素会垂直上下排列，否则会水平左右排列。

：顶栏容器。 ：侧边栏容器。 ：主要区域容器。

调整页面，高度自适应

第二步 编写路由文件，注意嵌套路由

routes: [{
        path: '/',
        name: 'HelloWorld',
        component: HelloWorld
    },
    /* {
        path: '/reg',
        name: 'Register',
        component: Register
    }, */
    {
        path: '/login',
        name: 'Login',
        component: Login
    },
    {
        path: '/index',
        name: 'Index',
        component: Index,
        // 嵌套路由
        children: [{
            // 这里不设置值，是把main作为默认页面
            path: '/reg',
            name: 'Register',
            component: Register
        }]
    }
]
   ......

第三步 NavMenu 导航菜单 组件

新建菜单组件Menu.vue,
直接复制下图里面的代码到Menu.vue然后微调样式。

image.png

标签之间增加如下代码，用于渲染路由到的url

Menu.vue完整代码：

注意的地方：

image.png

image.png

在index.vue中引用menu

效果图

image.png