初识vue第五篇

路由进阶

① 路由模块封装

目标：将路由模块抽离出来。 好处：拆分模块，利于维护

② 声明式导航 & 导航高亮 / 精确匹配&模糊匹配 / 自定义高亮类名

声明式导航传参 ( 查询参数传参 & 动态路由传参 )

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'
}
})