Vue——小白也能学!Day6

路由进阶

1.路由封装

所有的路由配置在main.js中不合适,所以需要拆分封装,加入router文件夹。便于后期维护。

router-link必须配to,不能配href。

修改后在css中修改router-link-active属性

模糊匹配

定制高亮类名

需要在路由中进行配置

跳转传参

目的是在跳转路由时进行传值

1.查询参数传参(传多个参数

语法格式如下

to="/path?参数名=值"------可以用&进行连接

②对应页面组件接收传递过来的值

$route.query.参数名

2.动态路由传参(传单个较方便

参数可选符

3.重定向

redirect重新定向路径

404 not found!

4.模式设置

这里的影响只对后台有影响,需要提醒后端配置规则

5.路由跳转

基本跳转

写在methods中

①path路径跳转

this.$router.push('路由路径')

this.$router.push({

path:'路由路径'

})

②name命名路由跳转(适合path路径长的场景)

需要给路由起一个名字

总结

路径简单path复杂path

多个参数query,参数少用params

相关推荐
半生过往20 小时前
前端学 Java 课程笔记
java·前端·笔记
广州华水科技21 小时前
2026年单北斗GNSS变形监测系统推荐,破解水库安全监测难题
前端
独爱香菜21 小时前
Next.js 15 + Cloudflare Workers 实战:零中间件多语言 SEO 站点架构
前端
计算机魔术师21 小时前
DeepSeek、Qwen3比肩GPT-5,本地跑大模型的时代来了
前端
xcyxiner21 小时前
flutter wsl2安装记录(使用宿主机虚拟机)
前端·flutter
前端炒粉21 小时前
长会话虚拟滚动与渲染优化
前端·javascript·vue.js
谙忆10241 天前
图片裁剪总是跑偏?用 object-fit、object-position 和真实像素把坐标对齐
javascript·css·图像识别
花归去1 天前
ant的a-table更改表格的高度
前端·javascript·html
sibylyue1 天前
基于 Vben Admin 框架的 Vue 3 前端项目配置文件及常用命令
前端·javascript·vue.js
知几蜗牛1 天前
0 后端 · 0 数据库 · 0 备案:用 AI 两天搓出的股票管理系统,开源了
前端·后端·llm