【Vue-路由案例】面经基础版
目录
- <<回到导览
- 1.面经基础版
- 1.1.VueCli建项目
- 1.1.1.VueCli 自定义项目
- 1.1.2.ESlint代码规范
- 1.2.项目路由
- 1.2.1.一级路由配置
- 1.2.2.二级配置路由
- 1.2.3.设置高亮
- 1.2.4.发生请求、渲染
- 1.2.5.跳转传参、再发请求
- 1.2.6.体验优化
- 1.2.7.keep-alive
<<回到导览
1.面经基础版
1.1.VueCli建项目
1.1.1.VueCli 自定义项目
-
安装脚手架 (已安装)
npm i @vue/cli -g
-
创建项目
vue create 项目名
-
选择创建自定义项目选项,回车
-
自定义项目(空格键为确认/取消),回车
-
选择vue的版本
-
是否使用history模式
-
选择css预处理
-
选择eslint规范
-
选择校验的时机 (保存校验)
-
选择配置文件的生成方式(放在单独的文件之中)
-
是否保存预设,为预设命名
当我们保存预设后,下次可以直接建立含有上面选项的项目
-
项目创建完毕
1.1.2.ESlint代码规范
JavaScript Standard Style 规范说明:https://standardjs.com/rules-zhcn.html
-
通过eslint插件来实现自动修正
-
配置VSCode
添加配置代码
// 当保存的时候,eslint自动帮我们修复错误 "editor.codeActionsOnSave": {"source.fixAll": true }, // 保存代码,不自动格式化 "editor.formatOnSave": false
1.2.项目路由
1.2.1.一级路由配置
import Vue from 'vue'
import VueRouter from 'vue-router'
// 一级路由
import Layout from '@/views/Layout.vue'
import ArticleDetail from '@/views/ArticleDetail.vue'Vue.use(VueRouter)
const router = new VueRouter({routes: [{path: '/',component: Layout},{path: '/detail',component: ArticleDetail}]
})
export default router
1.2.2.二级配置路由
通过children配置项,可以进行路由嵌套,配置二级路由
-
二级配置路由(view/index.js)
routes: [// 一级路由{path: '/',component: Layout,children: [// 二级路由{path: '/article',component: Article},{path: '/collect',component: Collect},{path: '/like',component: Like},{path: '/user',component: User}]},{path: '/detail',component: ArticleDetail}]
-
配置二级路由出口(Layout.vue)
<div class="h5-wrapper"><div class="content"><!-- 二级路由出口 --><router-view></router-view></div><nav class="tabbar"><router-link to="/article">面经</router-link><router-link to="/collect">收藏</router-link><router-link to="/like">喜欢</router-link><router-link to="/user">我的</router-link></nav></div>
一级路由的出口在App.vue中
<div class="wrapper"><router-view></router-view> </div>
很多同学心里的路由应该是这样的
-
诚然,这样的路由更符合我们操作逻辑;
-
但是在我们最开始的路由图中,一级路由首页和二级路由都有个特点,都有导航条
-
所以首页和二级路由分为一类,没有导航条的面经详情分为一类
-
从路由出口的角度来看,一级路由出口在App.vue,二级路由出口在首页(Layout.vue),而导航条在一级路由页Layout.vue中,二级路由出口外
-
所以,首页和二级路由都有都有导航条,而面经详情页没有
-
说得有点绕,画个图方便理解一些(一级路由出口就是包裹、定位一级路由页的容器,二级亦然)
1.2.3.设置高亮
-
将a标签替换为
<router-link to="/xxx">XXX</router-link>
-
设置高亮样式(也可以先自定义匹配类名)
.router-link-active{font-weight: 700;color: orange; }
1.2.4.发生请求、渲染
安装axios:yarn add axios
接口文档:
请求地址: https://mock.boxuegu.com/mock/3083/articles
请求方式: get
接下来的操作无非是请求数据(created),循环渲染,这里我就省略了
1.2.5.跳转传参、再发请求
-
为盒子设置点击传参
// 传参方式多样,可以自己选择 @click="router.push(`/detail?id=${item.id}`)"
-
获取传递参数,将参数传给服务器,再将结果渲染即可
1.2.6.体验优化
-
为首页重定向列表页
加配置项
redirect: '/article'
-
为面经详情页添加返回上一页按钮
@click="router.back()"
1.2.7.keep-alive
- 当路由被跳转后,原来所看到的组件就被销毁了,重新返回后组件又被重新创建了。
- 所以当点击返回上一页按钮,因为主页组件已被销毁,所以并不能回到进入面经详情页时,首页的位置
- 我们可以利用keep-alive组件,来缓存主页组件,来完成这个功能
keep-alive 是 Vue 的内置组件,当它包裹动态组件时,会缓存不活动的组件实例,而不是销毁它们。
keep-alive 是一个抽象组件:它自身不会渲染成一个 DOM 元素,也不会出现在父组件中
-
App.vue
<template><div class="h5-wrapper"><keep-alive><!-- 一级路由出口 --><router-view></router-view></keep-alive></div> </template>
以上代码,keep-alive包裹了一级路由出口,那么一级路由页都会被缓存;但是同为一级路由页的面经详情页,我们并不想其缓存(因为面经详情页太多了,浏览量多的画会影响性能),我们可以利用keep-alive的三个属性
属性 效果 include 组件名数组,只有匹配的组件会被缓存 exclude 组件名数组,任何匹配的组件都不会被缓存 max 最多可以缓存多少组件实例 -
上面代码可以改为(只显示了修改的部分)
<!-- LayoutPage为组件名,没有组件名才会匹配组件名 --> <keep-alive :include="['LayoutPage']"><router-view></router-view> </keep-alive>
缓存组件后,再返回首页,created,mounted等生命钩子并不会触发(因为组件没有被重新创建),如果我们要返回首页立即触发某些事件,我们可以利用keep-alive 的额外的两个生命周期钩子。
生命周期钩子 触发时机 activated 当组件被激活(使用)的时候触发 deactivated 当组件不被使用的时候触发
相关文章:
【Vue-路由案例】面经基础版
目录 <<回到导览1.面经基础版1.1.VueCli建项目1.1.1.VueCli 自定义项目1.1.2.ESlint代码规范 1.2.项目路由1.2.1.一级路由配置1.2.2.二级配置路由1.2.3.设置高亮1.2.4.发生请求、渲染1.2.5.跳转传参、再发请求1.2.6.体验优化1.2.7.keep-alive <<回到导览 1.面经基…...
C#调用C++动态库时出现`System.DllNotFoundException`错误的解决思路
文章目录 1. DLL文件路径问题2. 依赖的运行时库缺失3. 平台不匹配(x86/x64)4. 导出函数名称不匹配5. DLL文件损坏或权限问题6. 运行时库冲突(MT/MD不匹配)7. 使用DLLImport时的常见错误总结步骤 在C#中调用C动态库时出现System.Dl…...
数据清洗
map阶段:按行读入内容,对内容进行检查,如果字段的个数少于等于11,就删除这条日志(不保留)去除日志中字段个数小于等于11的日志内容。 <偏移量,第一行的内容> → <通过刷选之后的第一行…...
ubuntu 20.04 编译和运行A-LOAM
1.搭建文件目录和clone代码 mkdir -p A-LOAM/src cd A-LOAM/src git clone https://github.com/HKUST-Aerial-Robotics/A-LOAM cd .. 2.修改代码文件 2.1 由于PCL版本1.10,将CMakeLists.txt中的C标准改为14: set(CMAKE_CXX_FLAGS "-stdc14"…...
Oracle迁移翻车,数据校验没做好...
作为DBA,你是否经历过这样的噩梦?数据库迁移、主从同步、容灾切换后,数据不一致却迟迟无法定位,只能手动写脚本逐表比对,熬到凌晨还在查差异… Oracle GoldenGate Veridata(OGG Veridata) 就是…...
小刚说C语言刷题——第17讲 循环之for语句
在生活中,我们经常会碰到重复去做某一件事。例如,一个人绕着操场跑圈,一天24小时往复。这些周而往复的事,我们称为循环。 1.循环的作用 在编程时,我们用循环的目的有两个。一个是减少循环时代码量,一个是通…...
如何使用 Coze 的 HTTP 请求节点实现高效数据交互
如何使用Coze的HTTP请求节点实现高效数据交互 在自动化工作流开发中,与外部服务进行数据交互是核心需求之一。Coze平台的HTTP请求节点提供了强大的解决方案,支持通过HTTP协议实现数据的获取、提交、更新和删除等操作。本文将结合官方文档,详…...
【力扣hot100题】(071)每日温度
经典单调栈问题。 感觉自己对这类问题还是不太熟练,想了很久思路,还想了很久是单调递增栈还是单调递减栈…… 方法是维护一个单调递减栈。先将结果result初始化为0,如果温度一直递减,那么result就不用变化了。 遍历每日温度&am…...
ChatBI的落地挑战——技术先进≠产品可用
近年来,大语言模型(LLM)的爆发让“对话式BI”(ChatBI)成为行业热点。然而,许多企业发现,尽管技术Demo令人惊艳,实际落地却困难重重——用户提问率低、回答准确度不稳定、使用场景模糊…...
1.2 测试设计阶段:打造高质量的测试用例
测试设计阶段:打造高质量的测试用例 摘要 本文详细介绍了软件测试流程中的测试设计阶段,包括测试用例设计、测试数据准备、测试环境搭建和测试方案设计等内容。通过本文,读者可以系统性地了解测试设计的方法和技巧,掌握如何高效…...
x64dbg调试python解释器
可以先写个input()这会让dbg中断在ntdll模块中,查看调用堆栈在系统调用结束后的打断点 然后直接断到PyObject_Vectorcall函数...
浙江大学DeepSeek系列专题线上公开课第二季第四期即将上线!端云协同:让AI更懂你的小心思! - 张圣宇 研究员
今晚8点10分左右,端云协同:让AI更懂你的小心思!浙大学者张圣宇研究员将揭秘人机交互新玩法。浙江大学DeepSeek系列专题线上公开课第二季第四期即将上线! 讲座 主题: 大小模型端云协同赋能人机交互 主讲人:…...
【项目管理】第3章 信息系统治理 --知识点整理
相关文档,希望互相学习,共同进步 风123456789~-CSDN博客 (一)知识总览 对应:第1章-第5章 (二)知识笔记 三、信息系统治理 本文涉及信息系统治理与审计的核心知识。 1)…...
算法与数据结构线性表之栈和队列
Hello大家好! 很高兴与大家见面! 给生活添点快乐,开始今天的编程之路。 我的博客:<但愿. 我的专栏:C语言、题目精讲、算法与数据结构、C 欢迎点赞,关注 一 栈 1概念:栈是⼀种特殊的线性表,其只允许…...
【Introduction to Reinforcement Learning】翻译解读2
2.2 马尔可夫决策过程(MDPs) 马尔可夫决策过程(MDP)为顺序决策提供了框架,其中动作不仅影响即时奖励,还会影响未来结果。与多臂老虎机问题不同,MDP中的即时奖励与延迟奖励相平衡。在多臂老虎机…...
2016年-全国大学生数学建模竞赛(CUMCM)试题速浏、分类及浅析
2016年-全国大学生数学建模竞赛(CUMCM)试题速浏、分类及浅析 全国大学生数学建模竞赛(China Undergraduate Mathematical Contest in Modeling)是国家教委高教司和中国工业与应用数学学会共同主办的面向全国大学生的群众性科技活动,目的在于激励学生学习数学的积极性,提高学…...
UI测试(2)
1、HTML 是用来描述网页的一种语言。 指的是超文本标记语言 (Hyper Text Markup Language) ,HTML 不是一种编程语言,而是一种标记语言 (markup language) 负责定义页面呈现的内容:标签语言:<标签名>标签值<标签名>&am…...
Pr视频剪辑 Premiere Pro 2024 for Mac
Pr视频剪辑 Premiere Pro 2024 for Mac 文章目录 Pr视频剪辑 Premiere Pro 2024 for Mac一、介绍二、效果三、下载 一、介绍 Premiere Pro 2024 for Mac是一款专业的视频编辑软件,广泛应用于电影、电视、广告等领域。它为Mac用户提供了强大的剪辑、调色、音频处理等…...
电源测试系统自动化转型:Chroma 8000 与 NSAT-8000 核心功能对比解析
在全球制造业加速智能化升级的背景下,电源模块测试正从传统手动模式向自动化、智能化深度转型。作为企业降本增效与提升竞争力的关键,如何选择适配的测试系统成为行业焦点。本文聚焦市场主流的 Chroma 8000 与 NSAT-8000 两款系统,从功能设计…...
智能指针和STL库学习思维导图和练习
思维导图: #include <iostream> #include <vector> #include <string> using namespace std;// 用户结构体 struct User {string username;string password; };vector<User> users; // 存储所有注册用户// 使用迭代器查找用户名是否存在 ve…...
【JS】二分查找
题目 步骤 初始化指针:定义 left 和 right 两个指针,分别指向数组的起始位置和末尾位置,确定查找范围。进入循环:只要 left 小于等于 right,就继续执行循环,因为此时查找范围不为空。计算中间索引ÿ…...
Mamba模型
为什么要提出mamba模型? transformer特点:训练快,推理慢,计算成本O(n*n) Rnn的特点:训练慢,推理快,容易遗忘 其实很容易理解,因为RNN的输入只包含前一个隐…...
人工智能通识速览(Part4. 评估指标)
四、评估指标 1.回归模型 均方误差(MSE) 优点:数学性质良好,计算简单,对误差的惩罚力度较大,能很好地反映模型预测值与真实值之间的平均差异程度,便于比较不同模型的性能。缺点:由…...
IT运维服务方案
一、服务目标 IT 运维服务致力于构建稳固、高效且智能的信息系统生态,为客户的业务运营筑牢数字化根基。凭借前沿的主动式维护策略,运用大数据分析、智能监控等技术手段,提前洞察系统隐患,在萌芽阶段化解潜在故障。同时࿰…...
【简历全景认知2】电子化时代对简历形式的降维打击:从A4纸到ATS的生存游戏
一、当简历遇上数字洪流:传统形式的式微 在1990年代,一份排版精美的纸质简历还能让HR眼前一亮;但今天,超过75%的 Fortune 500 企业使用ATS(Applicant Tracking System)进行初筛,未优化的简历可能在5秒内就会沦为数字废土。这种变迁本质上符合「技术接纳生命周期」理论—…...
LLM面试题七
NLP算法工程师面试题8道|含解析 分类场景下bert和gptprompt的方式哪种会有更好效果,为什么? 在分类场景下,BERT比GPT更适合用于建模,因为BERT的结构中包含了双向的Transformer编码器,而GPT的结构中只包含单向的Transf…...
Semaphore
关于作者: CSDN内容合伙人、技术专家, 从零开始做日活千万级APP,带领团队单日营收超千万。 专注于分享各领域原创系列文章 ,擅长java后端、移动开发、商业化变现、人工智能等,希望大家多多支持。 目录 一、导读二、概览…...
视频插帧EMAVFI:extracting motion and appearance via inter-frame attention for video
文章目录 EMAVFI:extracting motion and appearance via inter-frame attention for efficient video frame interpolation1.核心概述2.帧间注意力机制为什么可以表示运动信息3.网络架构4.dataset类5.demo推理和训练代码6.总结 EMAVFI:extracting motion and appearance via in…...
⑨数据中心-M-LAG技术配置
华三数据中心网络是指华三提供的专门设计用于数据中心环境的网络解决方案。这种网络通常具有高性能、可扩展性和可靠性,旨在支持大规模数据中心的需求。华三数据中心网络解决方案通常包括以下特点: 1. 高带宽:支持高密度数据中心环境中大量网…...
永磁同步电机无速度算法--基于HOPLL的滑模观测器
一、原理介绍 传统PLL算法为二阶系统,其实现是基于转速变化变化缓慢的假设,因此在转速频繁出现动态变化时会导致动态性能不佳。为改善系统动态性能,将转速微分量引入PLL中,作为附加状态变量,与电角速度及转速共同构成…...
【Linux网络】网络套接字socket
🌈个人主页:秦jh__https://blog.csdn.net/qinjh_?spm1010.2135.3001.5343 🔥 系列专栏:https://blog.csdn.net/qinjh_/category_12891150.html 目录 Socket 编程预备 理解源 IP 地址和目的 IP 地址 认识端口号 端口号范围划分…...
ubuntu wifi配置(命令行版本)
1、查询当前设备环境的wifi列表 nmcli dev wifi list2、连接wifi nmcli dev wifi connect "MiFi-SSID" password "Password" #其中MiFi-SSID是wifi的密码,Password是wifi的密码3、查看连接情况 nmcli dev status...
配环境的经验
pip install -e . 该命令用于以“编辑模式”(也称为开发模式)安装当前目录下的 Python 包,比如包含有 setup.py、setup.cfg 或 pyproject.toml 文件的项目-e 是 --editable 的简写。以编辑模式安装时,pip 会在你的 Python 环境中创…...
STM32cubmax配置STM32407VET6,实现网络通信
文章目录 一、开发准备1、硬件准备2、软件准备 二、STM32CubeMX工程配置步骤1、创建新工程 三、外设配置步骤1)调试接口(SWD)配置2)时钟配置3)串口(USART)配置4)IO口配置(…...
LeetCode 热题 100_完全平方数(84_279_中等_C++)(动态规划(完全背包))
LeetCode 热题 100_完全平方数(84_279) 题目描述:输入输出样例:题解:解题思路:思路一(动态规划(完全背包)): 代码实现代码实现(思路一…...
【C++】vector的底层封装和实现
目录 目录前言基本框架迭代器容量第一个测试,野指针异常第二轮测试,浅拷贝的问题 元素访问修改操作push_backinsert迭代器失效问题 erase 默认成员函数构造函数双重构造引发调用歧义 拷贝构造赋值重载析构函数 源码end 目录 前言 废话不多说࿰…...
AI前端组件库Ant DesIgn X
Ant Design X AI:体验新秩序 Ant Design 团队精心打造 RICH 设计范式,为 AI 界面提供卓越解决方案,引领智能交互新体验。 设计语言与理论 官网: Ant Design X - 轻松打造 AI 驱动的界面。 AI 设计范式 —— RICH 是我们在蚂蚁…...
BGP路由协议之解决 IBGP 水平分割带来的问题
主要有以下 3 种方案: 全互联 :配置量大、耗费资源联邦: 配置量大、邻居会重建、中断时间较长RR 路由反射器:目前主流使用、简单、好用 联邦 IBGP 水平分割问题用与防止 AS 内部产生环路,在很大程度上杜绝了 IBGP 路…...
基于Java的人脸识别在线考试系统(jsp+springboot+mysql8.x)
基于Java的人脸识别在线考试系统(jspspringbootmysql8.x) 在线考试系统提供全面的考试管理和用户管理功能。登录界面支持管理员、教师和学生三种身份验证,确保不同用户访问相应的功能模块。系统自动组卷功能允许管理员根据不同科目和题型,如单选题、多选…...
如何对LLM大型语言模型进行评估与基准测试
基础概念 这几年,随着生成式 AI 和大型语言模型(LLMs)的兴起,AI 领域整体迎来了一波大爆发。 随着各种基于 LLM 的应用程序在企业里落地,人们开始需要评估不同推理部署方案的性价比。 LLM 应用的部署成本,…...
C语言内存函数和数据在内存的存储
一、内存操作函数深度解析 函数名原型核心特性典型应用场景注意事项memcpyvoid* memcpy(void* dest, const void* src, size_t num)内存块无重叠复制,性能高数组拷贝、结构体复制1. 必须确保目标空间足够 2. 不支持重叠内存(用memmove替代) …...
ChatGPT之智能驾驶问题讨论
ChatGPT之智能驾驶问题讨论 1. 源由2. 问题:2.1 智能驾驶级别定义🚗 L2(部分自动化,Partial Automation)🤖 L3(有条件自动化,Conditional Automation)🛸 L4&a…...
【PalladiumZ2 使用专栏 1 -- 波形 trigger 抓取详细介绍】
文章目录 Palladium Z2 OverviewPalladium 波形抓取Palladium 波形存放文件创建Palladium Trigger 断点设置Palladium 加探针并 dumpPalladium 波形查看 Palladium Z2 Overview Cadence Palladium Z2 是 Cadence 推出的企业级硬件仿真加速平台,旨在应对复杂 SoC 设…...
elasticsearch 8设置验证登录查询
最近总是困扰于9200网络勒索,老是在捣乱,动不动给我清理了index,实在是费劲,今天研究了下config配置,设置ca验证。 以下是完整的步骤和配置,确保生成的证书文件与elasticsearch.yml的配置一致: 1. 生成CA证书 运行以下命令生成CA证书:让输入账号或密码请直接回车。 …...
为什么使用了CDN源服务器需要关闭防火墙?
在网站运营过程中,不少站长会遇到这样的困惑:当使用 CDN 源服务器时,好像就得关闭源服务器的防火墙,不然就状况百出。这背后究竟是什么原因呢? 当你在浏览网页时,要是看到 “502 - 服务暂时不可用” 的提…...
Android 学习之 Navigation导航
1. Navigation 介绍 Navigation 组件 是 Android Jetpack 的一部分,用于简化应用内导航逻辑,支持 Fragment、Activity 和 Compose 之间的跳转。核心优势: 单 Activity 架构:减少 Activity 冗余,通过 Fragment 或 Com…...
初识 Three.js:开启你的 Web 3D 世界 ✨
3D 技术已经不再是游戏引擎的专属,随着浏览器技术的发展,我们完全可以在网页上实现令人惊艳的 3D 效果。而 Three.js,作为 WebGL 的封装库,让 Web 3D 的大门向更多开发者敞开了。 这是我开启这个 Three.js 专栏的第一篇文章&…...
PyTorch 笔记
简介与安装 PyTorch 是一个开源的 Python 机器学习库,基于 Torch 库,底层由C实现,应用于人工智能领域,如计算机视觉和自然语言处理。 PyTorch 最初由 Meta Platforms 的人工智能研究团队开发,现在属 于Linux 基金会的…...
day24学习Pandas库
文章目录 三、Pandas库4.函数计算3遍历3.1.遍历Series对象3.2.遍历DataFrame对象 4排序4.1 sort_index4.2 sort_values 5.去重drop_duplicates6.先分组在计算6.1 groupby6.2 filter过滤 7.合并未完待续.. 三、Pandas库 4.函数计算 3遍历 3.1.遍历Series对象 在讲解Series部…...
AI日报 - 2025年4月8日
AI日报 - 2025年4月8日 🌟 今日概览(60秒速览) ▎🤖 模型进展 | Llama 4发布引爆讨论 (性能、应用、部署、训练争议),OpenAI保持高速迭代,香港大学推Dream 7B扩散模型。 Meta Llama 4 Scout & Maveric…...