#路由进阶

路由进阶

路由模块封装

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

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

绝对路径：@指代src目录，可以用于快速引入组件

路由模块的封装抽离的好处是什么？

拆分模块，利于维护

以后如何快速引入组件？

基于 @ 指代 src 目录，从 src 目录出发找组件

声明式导航 & 导航高亮

需求：实现导航高亮效果

需求：实现导航高亮效果

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

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

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

1. router-link是什么?

vue-router提供的全局组件, 用于替换 a 标签

2. router-link怎么用?

<router-link to="/路径值" ></router-link>

必须传入to属性, 指定路由路径值

3. router-link好处?

能跳转，能高亮 (自带激活时的类名)

精确匹配&模糊匹配

声明式导航 - 两个类名

说明：我们发现 router-link 自动给当前导航添加了 两个高亮类名

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

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

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

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

router-link 会自动给当前导航添加两个类名，有什么区别呢？

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

router-link-exact-active 精确

自定义高亮类名

声明式导航 - 两个类名

说明：router-link 的 两个高亮类名 太长了，我们希望能定制怎么办？

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

linkActiveClass 模糊匹配 类名自定义

linkExactActiveClass 精确匹配 类名自定义

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

声明式导航 - 跳转传参

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

1. 查询参数传参

① 语法格式如下

l to="/path?参数名=值"

② 对应页面组件接收传递过来的值

l $route.query.参数名

2. 动态路由传参

2. 动态路由传参

① 配置动态路由

const router = new VueRouter({
routes: [
...,
{
path: '/search/:words',
component: Search
}
]
})

② 配置导航链接

l to="/path/参数值"

③ 对应页面组件接收传递过来的值

l $route.params.参数名

两种传参方式的区别

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

① 跳转：to="/path?参数名=值&参数名2=值"

② 获取：$route.query.参数名

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

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

② 跳转：to="/path/参数值"

③ 获取：$route.params.参数名

声明式导航跳转时, 有几种方式传值给路由页面?

① 查询参数传参 (多个参数)

跳转：to="/path?参数名=值"

接收：$route.query.参数名

② 动态路由传参 (简洁优雅)

路由： /path/:参数名

跳转： to="/path/值"

接收：$route.params.参数名

动态路由参数可选符

问题：配了路由 path: "/search/:words" 为什么按下面步骤操作，会未匹配到组件，显示空白？

动态路由参数可选符

const router = new VueRouter({

routes: [

{ path: '/', redirect: '/home' },

{ path: '/home', component: Home },

{ path: '/search/:words?', component: Search }

]

})

原因： /search/:words 表示，必须要传参数。如果不传参数，也希望匹配，可以加个可选符 "?"

路由重定向

Vue路由 - 重定向

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

说明：重定向 → 匹配path后, 强制跳转path路径

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

路由404

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

位置：配在路由最后

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

路由模式

问题: 路由的路径看起来不自然, 有#，能否切成真正路径形式?

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

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

编程式导航

编程式导航 - 基本跳转

问题：点击按钮跳转如何实现？

编程式导航：用JS代码来进行跳转

两种语法:

① path 路径跳转(简易方便)

this.$router.push('路由路径')

this.$router.push({

path: '路由路径'

})

② name 命名路由跳转(适合 path 路径长的场景)

this.$router.push({

name: '路由名'

})

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

编程式导航有几种跳转方式 ?

① 通过路径跳转 (简易方便)

this.$router.push('路由路径')

this.$router.push({

path: '路由路径'

})

② 通过路由名字跳转 (适合路径名字长的场景)

this.$router.push({

name: '路由名'

})

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

编程式导航传参 ( 查询参数传参 & 动态路由传参 )

问题：点击搜索按钮，跳转需要传参如何实现？

两种传参方式：查询参数 + 动态路由传参

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

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

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

this.$router.push({

path: '/路径',

query: {

参数名1: '参数值1',

参数名2: '参数值2'

}

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

$route.params.参数名

(动态路由传参需要配路由)

this.$router.push('/路径/参数值')

this.$router.push({

path: '/路径/参数值'

})

② name 命名路由跳转传参

this.$router.push({

name: '路由名字',

query: {

参数名1: '参数值1',

参数名2: '参数值2'

}

})

$route.query.参数名

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

this.$router.push({

name: '路由名字',

params: {

参数名: '参数值',

}

})

$route.params.参数名

(动态路由传参需要配路由)

组件缓存 keep-alive

问题：从面经 点到 详情页，又点返回，数据重新加载了 → 希望回到原来的位置

原因：路由跳转后，组件被销毁了，返回回来组件又被重建了，所以数据重新被加载了

解决：利用 keep-alive 将组件缓存下来

1. keep-alive是什么

keep-alive 是 Vue 的内置组件，当它包裹动态组件时，会缓存不活动的组件实例，而不是销毁它们。

keep-alive 是一个抽象组件：它自身不会渲染成一个 DOM 元素，也不会出现在父组件链中。

2. keep-alive的优点

在组件切换过程中 把切换出去的组件保留在内存中，防止重复渲染DOM，

减少加载时间及性能消耗，提高用户体验性。

问题：缓存了所有被切换的组件

3. keep-alive的三个属性

① include ： 组件名数组，只有匹配的组件会被缓存

② exclude ： 组件名数组，任何匹配的组件都不会被缓存

③ max ： 最多可以缓存多少组件实例

4. keep-alive的使用会触发两个生命周期函数

activated 当组件被激活（使用）的时候触发 → 进入这个页面的时候触发

deactivated 当组件不被使用的时候触发 → 离开这个页面的时候触发

组件缓存后就不会执行组件的created, mounted, destroyed 等钩子了

所以其提供了actived 和 deactived钩子，帮我们实现业务需求。

1. keep-alive是什么

Vue 的内置组件，包裹动态组件时，可以缓存

2. keep-alive的优点

组件切换过程中 把切换出去的组件保留在内存中(提升性能)

3. keep-alive的三个属性 (了解)

① include ： 组件名数组，只有匹配的组件会被缓存

② exclude ： 组件名数组，任何匹配的组件都不会被缓存

③ max ： 最多可以缓存多少组件实例

4. keep-alive的使用会触发两个生命周期函数 (了解)

activated 当组件被激活（使用）的时候触发 → 进入页面触发

deactivated 当组件不被使用的时候触发 → 离开页面触发