0、制作左右结构导航首页(4)

目标

• 期待效果
• 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',
            ame: 'Register',
            component: Register
        }]
    }
]
   ......

第三步 NavMenu 导航菜单 组件

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

image.png

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

Menu.vue完整代码：

注意的地方：

image.png

image.png

在index.vue中引用menu

效果图

image.png