黑马头条-路由和页面
动态路由,当有多个子路由时,写在实例中,为以后的修改不方便,我们就用动态路由,方便,易操作
没个页面路由的js页面中
import Layout from "@/layout";
// { path: '', component: '' }
// 每个子模块 其实 都是外层是layout 组件位于layout的二级路由里面
export default {
path: "/approvals", // 路径
name: "approvals", // 给路由规则加一个name
component: Layout, // 组件
// 配置二级路的路由表
children: [
{
path: "", // 这里当二级路由的path什么都不写的时候 表示该路由为当前二级路由的默认路由
component: () => import("@/views/approvals"),
// 路由元信息 其实就是存储数据的对象 我们可以在这里放置一些信息
meta: {
title: "审批",
icon: "example", // meta属性的里面的属性 随意定义 但是这里为什么要用title呢, 因为左侧导航会读取我们的路由里的meta里面的title作为显示菜单名称
},
},
],
};
meta:是路由的标题,图标
之后再,index.js中引入路由文件.
import approvalsRouter from "./modules/approvals";
export const asyncRoutes = [approvalsRouter]
由于文件过多,一个个写麻烦,我们就解构进去
const createRouter = () =>
new Router({
// mode: 'history', // require service support
scrollBehavior: () => ({ y: 0 }),
routes: [...constantRoutes, ...asyncRoutes],
});
树状控件,element-ui中的控件.我们做出引用
/** *
*
* 将列表型的数据转化成树形数据 => 递归算法 => 自身调用自身 => 一定条件不能一样, 否则就会死循环
* 遍历树形 有一个重点 要先找一个头儿
* ***/
export function tranListToTreeData(list, pid) {
var arr = [];
list.forEach((item) => {
if (item.pid === pid) {
// 找到之后 就要去找 item 下面有没有子节点
const children = tranListToTreeData(list, item.id);
if (children.length > 0) {
// 如果children的长度大于0 说明找到了子节点
item.children = children;
}
arr.push(item); // 将内容加入到数组中
}
});
return arr;
}
async getDepartments() {
const result = await getDepartments();
// console.log(result);
this.company = { name: result.companyName, manager: "负责人" }; // 这里定义一个空串 因为 它是根 所有的子节点的数据pid 都是 ""
this.data = tranListToTreeData(result.depts, "");
this.data = data;
console.log(data);
},
},
黑马头条-路由和页面相关推荐
- 前端基础第五天项目 社交媒体黑马头条项目-文章模块和评论
七.文章详情 创建组件并配置路由 1.创建 views/article/index.vue 组件 <template><div class="article-contain ...
- #博学谷it学习技术支持#黑马头条知识点1
#博学谷it学习技术支持#黑马头条知识点1 目录: 一.文章列表加载 二.Freemarker 三.对象存储服务MinIO 四.文章详情功能 黑马头条day2 一. 文章列表加载 1)需求分析 2)表 ...
- 前端基础第四天项目 社交媒体黑马头条项目-登录注册和个人中心
一.项目初始化 目标 能使用 Vue CLI 创建项目 了解 Vant 组件库的导入方式 掌握制作使用字体图标的方式 掌握如何在 Vue 项目中处理 REM 适配 理解 axios 请求模块的封装 使 ...
- 《黑马头条》 ElectricSearch 分词器 联想词 MangoDB day08-平台管理[实战]作业
07 app端文章搜索 1) 今日内容介绍 1.1)App端搜索-效果图 1.2)今日内容 2) 搭建ElasticSearch环境 2.1) 拉取镜像 docker pull elasticsear ...
- 《黑马头条》SpringBoot+SpringCloud+ Nacos等企业级微服务架构项目
01环境搭建.SpringCloud微服务(注册发现.服务调用.网关) 1)课程对比 2)项目概述 2.1)能让你收获什么 2.2)项目课程大纲 2.3)项目概述 随着智能手机的普及,人们更加习惯于通 ...
- 项目起步 (一) 01-项目介绍-使用技术-创建项目-调整目录结构——黑马头条移动端
项目介绍 首先,黑马头条移动端是一个IT资讯移动web应用,有着和今日头条一样的资讯浏览体验. 主要功能:资讯列表.标签页切换,文章举报,频道管理.离线频道,文章详情.阅读记忆,关注功能.点赞功能.评 ...
- 项目初始化及文件配置-黑马头条PC
DAY01-黑马头条PC 01-项目-简单介绍 今日头条,新闻客户端.不仅是浏览新闻的功能,发布新闻.发布新闻用户,PC管理系统. 登录 欢迎页面 内容管理 素材管理 发布文章 评论管理 粉丝管理 个 ...
- java 黑马头条 day4 自媒体文章发布 自媒体文章列表查询 频道列表展示 自媒体文章-发布、修改、保存草稿 自媒体文章-根据id查询 自媒体文章-删除
1 自媒体文章列表查询 1.1 需求分析 1.2 表结构和实体类 wm_news 自媒体文章表 需求: 如果有文章标题,按照文章标题模糊查询 如果有频道信息,按照频道ID查询 如果有文章状态,按照状态 ...
- Python黑马头条推荐系统第一天 架构介绍和离线计算更新Item画像
Python黑马头条推荐系统项目课程定位.目标 定位 课程是机器学习(包含推荐算法)算法原理在推荐系统的实践 深入推荐系统的业务流场景.工具使用 作为人工智能的数据挖掘(推荐系统)方向应用项目 目标 ...
最新文章
- 关于代理服务器藏IP的一些问题(高手免看)
- 《JavaScript权威指南第六版》学习笔记-JavaScript概述
- 模式扩展 ——简单工厂+配置文件解除耦合 *****
- 汇编 编程实现从键盘输入三位以内的十进制负数_macOS上的汇编入门(二)——数学基础...
- JavaScript常用API总结
- [JavaScript] FireBug 调试
- black.lst 丢失或被破坏,怎么解决
- java 开发注意项_JAVA开发注意事项集锦
- mysql查询男生基本情况_MySQL数据库技术与应用:数据查询
- 面试题7:重建二叉树
- 计算机科学与技术大学生职业规划,计算机科学与技术大学生职业生涯规划ppt
- oracle 用户解锁和修改用户密码
- C# Learning—Step By Step(9)
- windows中使用docker构建镜像
- vs2005下载|中文版|官方
- python 高等数学_Python在高等数学中的应用
- [译]为什么苹果眼镜会没有ARKit——当前AR产品的8大问题
- Halium 9 尝鲜 -- 在小米平板4上的移植 (五)
- Win7无线网络共享教程:解决所有问题
- 如何成为有效学习的高手(许岑)——思维导图 1
热门文章
- linux 查看pid 程序,linux 查看pid
- Felix 教你做字库——打印出手写效果,偷懒人士专用
- Android 基于RecyclerView实现批量操作
- 若个人计算机主板上的内存条松动,电脑内存条松动了怎么办?
- 黑鲨游戏手机4和黑鲨游戏手机4 Pro参数对比买哪个 黑鲨4和黑鲨4 Pro配置区别
- Mac Zotero关联teracloud网盘 空间15G 大大增加云盘存储空间
- turtle(海龟绘图)的一个简单例子太阳花(仿官方文档)
- ios 地图 自定义标注
- RTKLIB专题学习(四)---单点定位实现初识(二)
- 刺激战场灵敏度凭手感?全网通用十套灵敏度分享,总有一款适合你