news 2026/5/7 11:04:37

路由进阶、自定义创建VueCli项目

作者头像

张小明

前端开发工程师

1.2k 24
文章封面图
路由进阶、自定义创建VueCli项目

1.路由模块在封装时一般不会直接封装在main.js中,因为在子组件较多的情况下可能会导致main.js过于冗余,因此我们一般将路由模块单独封装在src下的router下;

2.声明式导航,<router-link>内容</router-link>,与<a></a>作用一致,并且渲染后本质就是<a>,但是<router-link>在选中选项时,会给被选中的选项添加两个类的状态,分别是:router-link-extract-active和router-link-active这二者分别对应了精准匹配和模糊匹配。

可以利用这个特性来实现,选中框变为高亮的功能,使用一个样式就可以实现:​​

这里精确匹配和模糊匹配的区别在于:精确匹配在点击子组件时,状态类消失,而模糊匹配则是在点击子组件时,状态类依旧保留;

这两个状态类的名字我们是可以在对应的router实例中自定义的:

3.声明式导航路由跳转传参:

语法格式:to="/path?key=value",

接受方收到时:$route.query.key

4.动态路由传参:

语法格式:to="/path/value"

须在router实例中进行path的改写,'原地址/:名字'

接收方:$route.params.在router实例中定义的名字,如图中的words

使用实例:

先改写router实例中的路径:

写跳转规则:

接收参数:

5.路由重定向:一般用于解决边界问题

用户在跳转到意料之外的情况下可以用重定向导向错误页面或者是主页面

写在router实例中的routes属性中

语法:{path:错误的路径,redirect:重新导向的路径}

实例:解决访问404问题:

在view中定义提示错误的组件:

在router实例中进行逻辑的编写,这里的*就代表了所有的地址,写在最下面,上面如果都匹配不上就走这一条:

路由的配置模式:

hash/history:hash会在地址前加一个#/而history则是常见的形式,二者可以在routers实例中用mode="hash/history"进行配置;

6.编程式导航:实现特定跳转的形式,并且动态改变跳转时传递的参数;

原生的实现方式有两种:

(1)path

a.语法:this.$router.push(’path?key=value‘)

语法:this.$router.push(’path/value‘)

b.语法: this.$router.push({'path?key=value'})

语法:this.$router.push{(’path/value‘)}

c.语法:this.$router.push({'path' ,query:{key=value}})

语法:this.$router.push({'path',params:{router实例中的参数名=value}})

(2)name

a.语法:this.$router.push(’name?key=value‘)

语法:this.$router.push(’name/value‘)

b.语法: this.$router.push({'name?key=value'})

语法:this.$router.push{(’name/value‘)}

c.语法:this.$router.push({'name' ,query:{key=value}})

语法:this.$router.push({'name',params:{router实例中的参数名=value}})

注意这里name的写法需要在router实例的routes属性中填写name如:

7.使用VueCli自定义创建项目,可以避免使用默认项目后再进行添加插件,一次到位

步骤如下:

第一步:在指定的工作区间目录,打开powershell,创建项目:

第二步:选择项目需要具备的特性:

第三步:选择基于哪个vue版本进行创建:

第四步:选择路由模式

第五步:选择css样式预处理器

第六步:选择哪套css配置规范:

第七步:保存上面的配置:

第八步:是否将上面创建项目的配置方式保存起来?

版权声明: 本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若内容造成侵权/违法违规/事实不符,请联系邮箱:809451989@qq.com进行投诉反馈,一经查实,立即删除!
网站建设 2026/4/10 9:45:32

Dubbo专题

一、Dubbo 到底是什么&#xff1f; Dubbo 是一款高性能的 Java RPC 框架。 核心定位&#xff1a;远程服务调用框架&#xff08;RPC&#xff09;不是微服务架构整体解决方案不是配置中心&#xff08;它依赖外部配置中心&#xff0c;如 Nacos、ZooKeeper&#xff09; 简单说&…

作者头像 李华
网站建设 2026/4/10 9:44:19

TurboDiffusion问题解决:清华开源框架,轻松应对视频生成显存不足

TurboDiffusion问题解决&#xff1a;清华开源框架&#xff0c;轻松应对视频生成显存不足 你是否遇到过这样的场景&#xff1a;脑子里有一个绝妙的视频创意&#xff0c;兴冲冲地打开AI视频生成工具&#xff0c;输入精心设计的提示词&#xff0c;点击生成&#xff0c;然后……等…

作者头像 李华
网站建设 2026/4/10 9:43:35

网盘直链下载助手技术实现方案:多平台API解析架构解析

网盘直链下载助手技术实现方案&#xff1a;多平台API解析架构解析 【免费下载链接】Online-disk-direct-link-download-assistant 一个基于 JavaScript 的网盘文件下载地址获取工具。基于【网盘直链下载助手】修改 &#xff0c;支持 百度网盘 / 阿里云盘 / 中国移动云盘 / 天翼…

作者头像 李华
网站建设 2026/4/10 9:43:27

[实战指南] 数据增广:从基础操作到策略调优的完整工作流

1. 数据增广的核心价值与应用场景 当你手头只有几百张医疗影像数据&#xff0c;却要训练一个肺炎检测模型时&#xff1b;当你收集了上千张工业零件照片&#xff0c;却发现光照条件单一导致模型泛化差时——数据增广技术就是你的救命稻草。我在2019年参与过一个农业病虫害识别项…

作者头像 李华
网站建设 2026/4/10 9:41:33

【PHP异步I/O性能黄金 checklist】:从Composer依赖注入到TCP Keep-Alive调优,12项必须验证的生产就绪指标

第一章&#xff1a;PHP异步I/O性能全景认知与演进脉络PHP长期以同步阻塞I/O模型著称&#xff0c;其传统FPM模式在高并发场景下面临连接数膨胀、资源闲置率高、响应延迟陡增等结构性瓶颈。随着Web应用实时性要求提升与微服务架构普及&#xff0c;PHP社区逐步构建起从用户空间协程…

作者头像 李华