专栏首页前端vue4.添加导航、分栏布局,配置路由及对应页面、登陆、404

4.添加导航、分栏布局,配置路由及对应页面、登陆、404

项目地址

github地址、 码云地址

路由懒加载 分栏布局

添加路由页面

首先先捋一下整体的页面结构分为三部分 1.侧边栏、2.header、3.视图区

页面结构

侧边栏的导航与页面相对应,根据导航栏新建对应页面(含登陆、404) src目录下新建views文件夹用来放视图文件

新建文件目录

新建各目录视图文件

视图文件目录

添加导航

导航页面 src/views/layout/slideBar.vue 导航栏用的是element的导航ui组建

//是否只保持一个子菜单的展开
opened: false,
//是否使用 vue-router 的模式
router: true,
//当前激活菜单的 index(导航属性)
//default-active:可以直接设置为当前路由当path

上面几个主要参数在文档中都有说明

测试导航

导航页-404

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • Vue+SessionStorage实现简单的登录

    我是基于vue脚手架cli做的,没用过cli的可以看下我之前写的cli脚手架搭建

    RtyXmd
  • Vue自定义弹窗组件(二)发包测试

    在node_modules中新建rty-prompt-dialog文件(模拟已发布包,最后会提交发布)

    RtyXmd
  • 接收post请求(vue+axios)解决跨域问题(三)

    测试是否成功连接: 打开mysql 运行node服务 npm start 运行vue npm run dev 发现并没有拿到数据...

    RtyXmd
  • 前端程序员必知:单页面应用的核心

    这几年里,单页面应用的框架令人应接不暇,各种新的概念也层出不穷。从过去的 jQuery Mobie、Backbone 到今天的 Angular 2、React、...

    Phodal
  • 你知道“啥是佩奇”,却不一定了解佩奇排名算法

    佩奇排名是根据页面之间的链接结构计算页面的值的一种算法。下面我们通过动画来理解进行计算的具体流程。

    AI科技大本营
  • 啥是佩奇排名算法

    佩奇排名是根据页面之间的链接结构计算页面的值的一种算法。下面我们通过动画来理解进行计算的具体流程。

    五分钟学算法
  • 我的CMS开发记-4 介绍一下DotNetNuke的系统执行流程

           有朋友说应该写个大致结构出来。想想也有道理,那么我就来介绍一下Dotnetnuke的执行流程。基本上我这个就是照搬他的 基本思路     一个站点...

    用户1687945
  • 我们看一眼广告值多少钱?创造了多大的价值?

    大数据文摘
  • web scraper 抓取分页数据和二级页面内容

    如果你已经用过这个工具,想必已经用它抓取过一些数据了,是不是很好用呢。也有一些同学在看完文章后,发现有一些需求是文章中没有说到的,比如分页抓取、二级页面的抓取、...

    古时的风筝
  • Java(web)项目安全漏洞及解决方式【面试+工作】

    Java帮帮

扫码关注云+社区

领取腾讯云代金券