vue2 —— Day6

路由模块封装

问题：所有的路由配置都堆在main.js中不合适

目标：将路由模块抽离出来 —— 拆分模块，易于维护 

步骤：

• 新建router->index.js；将路由相关东西提取到router下的index.js中

• index.js中导入vue模块

• index.js中导出路由对象r

• main.js中导入路由对象r

改进： 

router-link 代替 a标签实现高亮

需求：实现导航高亮效果

—— 使用vue-router提供的一个全局组件router-link（取代a标签）

vue-router的功能：

• 能跳转；必须配置to属性来指定路径；to无需#
• 能高亮；自带激活时的类名，可以根据这两个类名来设置高亮样式

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

router-link-exact-active 和 router-link-active的区别

router-link-active：模糊匹配（用的较多）

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

router-link-exact-active：精确匹配

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

自定义 router-link 的两个高亮类名

router-link的两个高亮类名太长了，希望自定义定制

—— vue-router官方提供了一种方式可以区配置高亮类名

const router = new VueRouter({

        routes:[

               ...

        ],

        linkActiveClass:"类名1",    //配置模糊匹配的类名

        linkExactActiveClass:"类名2"   //配置精确匹配的类名

})

声明式导航 —— 跳转传参

声明式导航vs编程式导航

声明式导航：在网页中点击<a>链接实现网页的切换；在Vue项目中点击<router-link></router-link>切换组件，这都属于声明式导航

编程式导航：编程式导航是通过代码控制页面跳转的一种方式，比如在普通网页用location.href跳转到新页面

目标：在跳转路由时，进行传值

两种传参方式

• 查询参数传参（适用于传多个参数）

语法格式：to = "/path?参数名=值&参数名2=值2

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

效果展示：

注意 vue 和 vue-router 版本匹配问题

删node_modules和package-lock.json；package.json改版本，npm i

•  动态路由传参（适用于传单个参数） 

配置动态路由：path:"/path/:参数名"

比如 path: '/search/:words' -> /search/study；/search/heima 都可以匹配，只要是以/search开头

语法格式：to = "/path/参数值"

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

效果展示：

/search/:words 注意事项

/search/:words表示必须要传参数；如果不传参数，就表明未匹配到组件，就会显示空白（这样不美观）

我们希望不传参数，也能匹配到组件 —— 加个可选符 "?"

效果展示：

Vue路由 — 重定向

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

重定向 => 匹配到路径后，强制跳转到重定向的路径

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

效果展示：

Vue路由 — 404

作用：当路径找不到匹配时， 给个提示页面

注意位置：一定要放在整个路由的最后面！

语法：{path: '*' , component: NotFind }

注意：

1.'*' 任意路径

2.{path: '*' , component: NotFind } 代表前面的都没被匹配到，就命中/匹配最后这个

3.注意要创建NotFind组件；组件的内容可以写成 " Page Not Find 404 "；

别忘了在router/index.js里导入

效果展示：

Vue路由 — 模式设置

默认情况下路由模式为hash模式；有#（http://localhost:8080/#/home），路由的路径看起来不自然，怎么切换成无#模式（http://localhost:8080/home）

—— 路由模式配成history

语法：

const router = new VueRouter({

        routes,

        mode: "history"

})

编程式导航 —— 基本跳转

window.location.href 适用于多页面模式；它的值是一个字符串

多页面模式页面的组成：多个完整页面，例如page1.html、page2.html等

单页面模式页面的组成：由一个初始页面和多个页面模块组成

而单页模式，站内跳转（局部刷新）通常采用两种方式：

• path 路径跳转

法一（简写）. this.$router.push('路由路径')

法二（完整写法）. this.$router.push({

                                       path:'路由路径'

                               })

• name 命名路由跳转 

需要往路由规则里起个名字；适用于path路径名很长的场景

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

this.$router.push({

        name:'路由名'

})

编程式导航 —— 路由传参

需求：点击搜索按钮，跳转传参

前面的两种跳转方式对 查询参数 + 动态路由传参 这两种传参方式都支持；下面将一一介绍：

path 路径跳转传参

• 查询参数方式

法一. this.$router.push('/路径?参数名1=参数值1&参数2=参数值2')

接收：$route.query.参数名

1. js中的反引号``

模板字符串；

这样写的话，字符串就可以插入变量和表达式；变量名写在 ${} 中，${} 中可以放入 JavaScript 表达式；比如说“`我是${name},我${age + 1}岁了。` ”

2.双向数据绑定 v-model

注意：一个组件的data选项必须是个函数；以保证每个组件实例维护的一份数据对象

接收 

效果展示：

法二（对象写法，query传参）✅

this.$router.push({

        path:'/路径',

        query:{

                参数名1：'参数值1',

                参数名2：'参数值2'

        }

})

接收：$route.query.参数名

• 动态路由传参 

:参数名

跳转：/路径/参数值

接收：.params.参数名

法一. 

this.$router.push(`/search/${this.inpValue}`)

1.采用动态路由

2.跳转 

3.接收 

法二（对象写法）.

this.$router.push({

        path:`/search/${this.inpValue}`

})

name命令路由跳转传参

• 查询参数（query传参）

this.$router.push({

        name: '路由名字',

        query: { 

                参数名1：'参数值1',

                参数名2：'参数值2'

        }

})

接收：$route.query.参数名

query传query收；

• 动态路由传参（需配动态路由）

this.$router.push({

        name: '路由名字',

        params: { 

                参数名：'参数值',

        }

})

接收：$route.params.参数名

params传params收；