vue2干货总结8（路由模块封装、router-link、声明式导航、路由重定向、编程式导航）

一.路由模块封装

将路由模块抽离出来，拆分模块，利于维护

1.src下新建文件夹router，在router中创建index.js文件，将相关的路由代码剪贴到index.js文中

注意：index.js文件中引入的文件路径（最好使用@绝对路径）、引入vue、路由导出

2.在main.js文件中导入路由文件index.js

二.router-link

需求：实现导航高亮效果

vue-router提供了一个全局组件router-link(取代a标签)

1.能跳转，配置to属性指定路径(必须)。本质还是a标签，to无需#

2.能高亮，默认就会提供高亮类名，可以直接设置高亮样式

然后只需要在nav-item标签上设置高亮颜色就可以了

router-link自动给当前导航添加了两个高亮类名

1.router-link-active模糊匹配(用的多)

to="/my" 可以匹配 /my /my/a /my/b......

2.router-link-exact-active精确匹配

to="/my" 仅可以匹配 /my

自定义匹配的类名

1.在index.js文件中添加linkActiveClass 和linkExactActiveClass

2.修改样式

三.声明式导航---跳转传参

1.查询参数传参

语法：to="/path**?参数名=值"**

对应页面组件接收传递过来的值：$route.query.参数名

实现发现页到个人中心页的跳转并传参：

2.动态路由传参

1.配置动态路由

2.配置导航链接：to="/path/参数值"

3.对应页面组件接收传递过来的值：$route.params.参数名

两种传参方式的区别：

查询参数传参(比较适合传多个参数)

动态路由传参(优雅简洁，传单个参数比较方便)

注意：/my/:key表示，必须要传参数。如果不传参数，也希望匹配，可以加个可选符"?"

四.路由重定向

问题：网页打开，url默认是/路径，未匹配到组件时，会出现空白

重定向------匹配path后，强制跳转path路径

语法：{ path：匹配路径，redirect：重定向到的路径 }

如何配置404页面？

位置：配在路由最后

语法：path：' * '(任意路径)---前面不匹配就命中最后这个

模式设置：

hash路由(默认) ：例如：http://localhost:8080**#/**home

history路由(常用) ：例如：http://localhost:8080**/** home(以后上线需要服务器端支持)

五.编程式导航

两种路由跳转方式：

1.path路径跳转（简易方便）

语法：this.$router.push('路由路径')

完整写法：

javascript 复制代码

this.$router.push({
    path:'路由路径'
})

2.name命名路由跳转（适合path路径长的场景）

语法：

javascript 复制代码

this.$router.push({
    name:'路由名'
})

javascript 复制代码

{ name:'路由名',path:'/path/xxx',component:xxx }

两种跳转方式，对于两种传参方式都支持

path路径跳转传参(query传参)

javascript 复制代码

this.$router.push('/路径?参数名1=参数值1 & 参数2=参数值2')
this.$router.push({
    path:'/路径'
    query:{
        参数名1:'参数值1',
        参数名2:'参数值2'
    }
})
//接收：$router.query.参数名

path路径跳转传参(动态路由传参)

javascript 复制代码

this.$router.push('/路径/参数值')
this.$router.push({
    path:'/路径/参数值'
})
//接收：$router.params.参数值

name命名路由跳转传参(query传参)

javascript 复制代码

this.$router.push({
    name:'路由名字'
    query:{
        参数名1:'参数值1'，
        参数名2:'参数值2'
})
//接收：$router.query.参数名

name命名路由跳转传参(动态路由传参)

javascript 复制代码

this.$router.push({
    name:'路由名字'，
    params:{
        参数名:'参数值'，
})
//接收：$router.params.参数值