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

相关推荐
XPoet1 小时前
AI 编程工程化:Hook——AI 每次操作前后的自动检查站
前端·后端·ai编程
難釋懷2 小时前
RedisTemplate配置读写分离
前端·bootstrap·html
冰暮流星2 小时前
javascript如何实现删除数组里面的重复元素
开发语言·前端·javascript
网络点点滴3 小时前
透传属性$attrs
前端·javascript·vue.js
90后的晨仔4 小时前
OpenClaw macOS 完整安装指南
前端
Moment4 小时前
尤雨溪宣布 Vite+ 正式开源,前端工具链要大一统了
前端·javascript·面试
喵叔哟4 小时前
5. 【Blazor全栈开发实战指南】--Blazor组件基础
开发语言·javascript·ecmascript
sunny_4 小时前
📖 2026年 大厂前端面试手写题库已开源(2.3k star)
前端·面试·github
IT_陈寒4 小时前
Vue组件复用率提升300%?这5个高阶技巧让你的代码焕然一新!
前端·人工智能·后端