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

相关推荐
那些年丶ny6 小时前
颜色扩展库
前端·javascript·数据可视化
ihuyigui6 小时前
海外签收通知短信接口
android·java·开发语言·前端·数据库·后端
YWL6 小时前
OpenLayers + Vue 2 使用指南(01)
前端·javascript·vue.js
暖和_白开水6 小时前
数据分析agent (七):contextvars 模块上下文request_id
java·前端·数据分析
程序员黑豆7 小时前
鸿蒙应用开发:Flex 组件从入门到实战
前端·华为·harmonyos
大爱编程♡7 小时前
Vue3+TypeScript+element-plus的文章管理项目(配后端接口)-退出及文章管理页面
前端·javascript·typescript
先吃饱再说7 小时前
React 组件设计:从 Props 传递到组件封装
前端·react.js
独立开阀者_FwtCoder7 小时前
最近做了一个健身小程序:智形健身助手,健身的佬们来提点意见
前端·javascript·github
达子6667 小时前
第8章_HarmonyOs开发图解 剪贴板
vue.js
舒灿7 小时前
喵ing Tab 1.0.0 正式发布
前端·ai编程