4-6 网站首页布局开发

孤注一掷、

已于 2022-02-25 22:09:36 修改

阅读量365

点赞数

分类专栏： SpringBoot 文章标签： vue.js javascript

于 2022-02-25 21:50:03 首次发布

本文链接：https://blog.csdn.net/Sunweikai123/article/details/123141793

版权

本文介绍了如何在Vue.js应用中使用Ant Design组件库进行网站首页布局开发，重点是App.vue文件的修改，包括设置id以匹配选择器，利用router-link和to处理导航，通过router-view动态填充路由内容。同时，解释了header和footer的固定位置，以及sider和content作为二级分类如何利用router-view进行动态渲染。在home.vue中，通过端点封装sider和content，并解决语法规则错误。

摘要由CSDN通过智能技术生成

App.vue中修改为以下内容：

<template>
  <a-layout id="components-layout-demo-top-side-2">
    <a-layout-header class="header">
      <div class="logo" />
      <a-menu
          v-model:selectedKeys="selectedKeys1"
          theme="dark"
          mode="horizontal"
          :style="{ lineHeight: '64px' }"
      >
        <a-menu-item key="1">nav 1</a-menu-item>
        <a-menu-item key="2">nav 2</a-menu-item>
        <a-menu-item key="3">nav 3</a-menu-item>
      </a-menu>
    </a-layout-header>
    <a-layout>
      <a-layout-sider width="200" style="background: #fff">
        <a-menu
            v-model:selectedKeys="selectedKeys2"
            v-model:openKeys="openKeys"

最低0.47元/天解锁文章

孤注一掷、

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
3
评论
4-6 网站首页布局开发

App.vue中修改为以下内容：<template> <a-layout id="components-layout-demo-top-side-2"> <a-layout-header class="header"> <div class="logo" /> <a-menu v-model:selectedKeys="selectedKeys1" theme="dark"
复制链接

扫一扫

专栏目录