面经案例+

server/2024/12/17 2:23:46/

首先配置路由

  •  一级路由:在routes中配置首页Layout和面经详情ArticleDetail

  • 二级路由:在首页Layout的路由配置中配置children路由,分别是列表,收藏,喜欢,我的

其次在首页Layout中用router-link替换a标签,并使用类a.router-link-active进行模糊匹配,达到点击链接高亮显示的效果


最后用router-view标签在Layout组件中用于匹配到的二级路组件的展示

 

实现功能

  1. 页面请求渲染(Article.vue中)

  2. 跳转传参到详情页,详情页渲染

  3. 组件缓存,优化性能  

v-for渲染 

给文章注册点击事件,点击跳转(Article.vue)到面经详情中

 

 

面经详情中通过params接收

首页Layout是空白,可以将之重定向到其他子路由的路径中

详情页点击返回无效果,在详情页中注册点击事件,跳转返回上一页$router.back()

点击面经页面的某个文章了解面经详情,也就是点击Article页面文章,跳转到ArticleDetail页面,跳转时一并传参id。
到面经详情之后,同样进行get请求参数,不同于面经页面的是,这里get请求的地址栏地址需要加上传过来的id,就能获取对应的参数

 

进行渲染 

 从面经页面跳转到面经详情时有一瞬间空白,这是因为请求数据需要时间。给渲染加上一个判断v-if ,等数据请求过来再渲染

 


http://www.ppmy.cn/server/150779.html

相关文章

STM32串口接收与发送(关于为什么接收不需要中断而发生需要以及HAL_UART_Transmit和HAL_UART_Transmit_IT的区别)

一、HAL_UART_Transmit和HAL_UART_Transmit_IT的区别 1. HAL_UART_Transmit_IT(非阻塞模式): HAL_UART_Transmit_IT 是非阻塞的传输函数,也就是说,当你调用 HAL_UART_Transmit_IT 时,它不会等到数据完全发…

redis 架构详解

Redis架构详解可以从以下几个方面进行阐述: 一、部署架构 Redis有多种部署架构,适用于不同的应用场景和需求,主要包括以下几种: 单机模式(Standalone Mode) 特点:部署简单,配置方便…

union find算法 c++

1.原理参考 labuladong-fucking-algorithm/算法思维系列/UnionFind算法详解.md at master jiajunhua/labuladong-fucking-algorithm GitHub 2.初级模式 #include <iostream>class UF {public:// 记录连通分量/* 构造函数&#xff0c;n 为图的节点总数 */UF(int n) {…

Jenkins容器使用宿主机Docker(五)

DevOps之安装和配置 Jenkins (一) DevOps 之 CI/CD入门操作 (二) Sonar Qube介绍和安装&#xff08;三&#xff09; Harbor镜像仓库介绍&安装 &#xff08;四&#xff09; Jenkins容器使用宿主机Docker&#xff08;五&#xff09; Jenkins流水线初体验&#xff08;六&#…

02. Docker:安装和操作

目录 一、Docker的安装方式 1、实验环境准备 1.1 关闭防火墙 1.2 可以访问网络 1.3 配置yum源 2、yum安装docker 2.1 安装docker服务 2.2 配置镜像加速 2.3 启动docker服务 3、二进制安装docker 3.1 下载或上传安装包并解压 3.2 配置使用systemctl管理 3.3 配置镜像…

SpringBoot 手动实现动态切换数据源 DynamicSource (中)

大家好&#xff0c;我是此林。 SpringBoot 手动实现动态切换数据源 DynamicSource &#xff08;上&#xff09;-CSDN博客 在上一篇博客中&#xff0c;我带大家手动实现了一个简易版的数据源切换实现&#xff0c;方便大家理解数据源切换的原理。今天我们来介绍一个开源的数据源…

QTreeView 与 QTreeWidget 例子

1. 先举个例子 1班有3个学生&#xff1a;张三、李四、王五 4个学生属性&#xff1a;语文 数学 英语 性别。 语文 数学 英语使用QDoubleSpinBox* 编辑&#xff0c;范围为0到100,1位小数 性别使用QComboBox* 编辑&#xff0c;选项为&#xff1a;男、女 实现效果&#xff1a; 2…

Scala的正则表达式3

贪婪模式与非贪婪模式 object test { //正则表达式 def main(args: Array[String]): Unit { // 贪婪模式 // 正则匹配默认是贪婪模式的 // ? 非贪婪模式,加在量词的后面 //在如下字符串中 查找 满足正则表达式要求的内容 // 找全部的手机号 // 规则&#xff1a; // 1.11位数…