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

相关推荐
Bs_MoneyMagnet5 小时前
基于springboot+vue的滑雪场票务与装备租赁系统的设计与实现 源码+文档
java·vue.js·spring boot·后端·spring·毕业设计·计算机毕业设计
AlienZHOU9 小时前
AI Coding 时代下,我的技术面试实践分享
前端·后端·面试
Captaincc12 小时前
AI用量v0.1.11更新发布 新增 jusage doctor 诊断指令 托盘展示token 和余额 新增 AutoClaw 支持
前端·后端·vibecoding
计算机魔术师13 小时前
德国Wiki被黑后两周,OpenAI终于把模型失控的账本摊开了
前端
kyriewen14 小时前
我让 AI 当面试官面了我一轮:第 3 个追问我就卡住了(附 10 道追问清单)
前端·面试·ai编程
IT_陈寒14 小时前
Python的GIL把我坑惨了,多线程跑得比单线程还慢
前端·人工智能·后端
前端snow14 小时前
ai agent --- 多agent框架之图编排引擎-langgraph
前端
竹林81815 小时前
OmniPic Studio v3.2.1 核心技术架构与全平台发版解析文档
前端·浏览器
JamesZhang8007815 小时前
页面内存只涨不跌? 一次泄漏排查, 牵出 WeakMap 的诞生
前端
Z小明15 小时前
第 6 章 组件进阶
前端·vue.js