k8sailor - 10 使用 vue-router 进行路由管理
2023-02-18 16:39:37 时间
tag: https://github.com/tangx/k8sailor/tree/feat/10-vue-router-and-less
使用 vue-router 路由管理
安装 vue-router
支持参考 https://tangx.in/2021/09/28/vue3-vue-router/
- 将默认的 /webapp/src/App.vue 作为最基本的入口, 除了引入
Index.vue
文件模块,不进行其他操作, 保持整洁。其行为类似 golang 中的main.go
。 - 创建 /webapp/src/components/Index.vue 模块作为 index 入口文件, 也是主要的布局页面。
- 路由信息(
router-link
) 将放置在页面左侧 - 路由展示(
router-view
) 作为占位符放在右侧。
- 路由信息(
- 所有数据展示类模块都放在 /webapp/src/components/views 目录下。所有内容将通过
vue-router
组件渲染, 展示在Index.vue
模块的router-view
区域。
使用 less 进行 Index 部署
less https://lesscss.org/ 是 css 的超级。不仅语法与 css 相同。而且支持 嵌套 书写, 可以直观的展现组件之间的层级关系。
div
本身是 行元素 , 即 一个 div 就需要占用一行。在 css 布局中使用 display: flex;
后将脱离数据流, 悬浮并排在一起。默认为水平排列。
配合使用 flex-direction: column;
将垂直排列。
<style lang='less' scoped>
.body{
// body 子元素悬浮水平排列
display: flex;
.body-left{
width: 20%;
margin: 5px;
.link-container{
// 垂直排列
display: flex;
flex-direction: column;
}
}
}
</style>
flex: https://developer.mozilla.org/zh-CN./Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox
相关文章
- React源码学习进阶篇(一)新版React如何调试源码?
- React源码学习进阶(二)初识Fiber架构
- React源码学习进阶(三)rootFiber的创建流程
- React源码学习进阶(四)render流程的入口逻辑详解
- React源码学习进阶(五)beginWork如何处理Fiber
- React源码学习进阶(六)completeWork究竟做了什么
- React源码学习进阶(七)挂载阶段的commitWork
- React源码学习进阶(八)setState底层逻辑
- MATLAB随机波动率SV、GARCH用MCMC马尔可夫链蒙特卡罗方法分析汇率时间序列|附代码数据
- R语言Apriori关联规则、kmeans聚类、决策树挖掘研究京东商城网络购物用户行为数据可视化|附代码数据
- 电量计基础知识介绍:
- 瞧瞧别人家的API接口,那叫一个优雅
- 暴增到 1k star 的开源项目,原来长这样!
- 程序员必备小技能:mac文件备份和清理、常用工具的安装和配置
- 前端小技能:Chrome DevTools中的操作技巧
- SOLIDWORKS 基于浏览器的角色 TOP 10 增强功能
- java小技能:对list集合根据条件进行分组、过滤和字段筛选
- mybatis-plus小技能
- Java小技能:快速创建List常用几种方式
- DBA的技术方向