路由进阶
① 路由模块封装
目标:将路由模块抽离出来。 好处:拆分模块,利于维护
② 声明式导航 & 导航高亮 / 精确匹配&模糊匹配 / 自定义高亮类名
声明式导航传参 ( 查询参数传参 & 动态路由传参 )
vue-router 提供了一个全局组件 router-link (取代 a 标签)
a.能跳转,配置 to 属性指定路径(必须) 。
本质还是 a 标签 ,to 无需 #
b.能高亮,默认就会提供高亮类名,可以直接设置高亮样式
c.两个类名:
router-link-active //模糊匹配 (用的多)
to="/my" 可以匹配 /my /my/a /my/b ....
router-link-exact-active //精确匹配
to="/my" 仅可以匹配 /my
d.两个高亮类名 太长了,定制方法:
<div class="footer_wrap">
<a href="#/find" class></a>
<a href="#/my" aria-current="page" class="router-link-exact-active router-link-active">我的音乐</a>
<a href="#/friend" class>朋友</a>
</div>
修改:
const router = new VueRouter({
routes: [...],
linkActiveClass: "类名1",
linkExactActiveClass: "类名2"
})
e.声明式导航 - 跳转传参
目标:在跳转路由时, 进行传值
1. 查询参数传参
① 语法格式如下
l to="/path?参数名=值"
② 对应页面组件接收传递过来的值
l $route.query.参数名
f.动态路由传参
① 配置动态路由
const router = new VueRouter({
routes: [
...,
{
path: '/search/:words',
component: Search
}
]
})
② 配置导航链接
to="/path/参数值"
③ 对应页面组件接收传递过来的值
$route.params.参数名
③ 路由重定向 / 路由404 / 路由模式
a.说明:
重定向 → 匹配path后, 强制跳转path路径
b.语法:
{ path: 匹配路径, redirect: 重定向到的路径 },
const router = new VueRouter({
routes: [
{ path: '/', redirect: '/home'},
{ path: '/home', component: Home },
{ path: '/search/:words', component: Search }
]
})
c.Vue路由 - 404
作用:
当路径找不到匹配时,给个提示页面
位置:
配在路由最后
语法:
path: "*" (任意路径) – 前面不匹配就命中最后这个
④ 编程式导航 / 编程式导航传参 ( 查询参数传参 & 动态路由传参 )
a.编程式导航:用JS代码来进行跳转
两种语法:
① path 路径跳转
② name 命名路由跳转
this.$router.push('路由路径')
this.$router.push({
path: '路由路径'
})
this.$router.push({
name: '路由名'
})
{ name: '路由名', path: '/path/xxx', ... },
b.两种传参方式:
查询参数 + 动态路由传参
c.两种跳转方式,
对于两种传参方式都支持:
① path 路径跳转传参 (query传参)
② name 命名路由跳转传参
this.$router.push('/路径?参数名1=参数值1&参数2=参数值2')
this.$router.push({
path: '/路径',
query: {
参数名1: '参数值1',
参数名2: '参数值2'
}
})