Vue的学习（5）

1.路由进阶

1.路由模块封装

路由的封装抽离
问题：所有的路由配置都堆在main.js中合适么？
目标：将路由模块抽离出来。好处：拆分模块，利于维护

小结：
路由模块的封装抽离的好处是什么？
拆分模块，利于维护
以后如何快速引入组件？
基于 @ 指代 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 的两个高亮类名太长了，我们希望能定制怎么办？

const router = new VueRouter({

routes:[......]

linkActiveClass: " 类名1 ",

linkExactActiveClass: " 类名2 "

})

小结：
如何自定义 router-link 的两个高亮类名？
linkActiveClass 模糊匹配类名自定义
linkExactActiveClass 精确匹配类名自定义

声明式导航 - 跳转传参

1. 查询参数传参
2. 动态路由传参

目标：在跳转路由时, 进行传值
1. 查询参数传参
2. 动态路由传参

1. 查询参数传参

① 语法格式如下
to="/path?参数名=值"
② 对应页面组件接收传递过来的值
$route.query.参数名

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" 为什么按下面步骤操作，会未匹配到组件，显示空白？

动态路由参数可选符

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

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

Vue路由 - 404

作用：当路径找不到匹配时，给个提示页面
位置：配在路由最后
语法：path: "*" (任意路径) – 前面不匹配就命中最后这个

import NotFind from '@/views/NotFind'
const router = new VueRouter({
routes: [{ path: '/', redirect: '/home' },{ path: '/home', component: Home },{ path: '/search/:words?', component: Search },{ path: '*', component: NotFind }]
})

Vue路由 - 模式设置

问题: 路由的路径看起来不自然, 有#，能否切成真正路径形式?
hash路由(默认) 例如: http://localhost:8080/#/home
history路由(常用) 例如: http://localhost:8080/home (以后上线需要服务器端支持)

编程式导航 - 基本跳转

编程式导航：用JS代码来进行跳转
两种语法:
① path 路径跳转
② name 命名路由跳转

① 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传参)
② name 命名路由跳转传参

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

① path 路径跳转传参 (动态路由传参)
② name 命名路由跳转传参

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

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

this.$router.push({name: '路由名字',query: {参数名1: '参数值1',参数名2: '参数值2'}})

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

this.$router.push({name: '路由名字',params: {参数名: '参数值',}
})

小结：

编程式导航，如何跳转传参 ?
1. path 路径跳转
① query传参

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

this . $router . push ({

path: '/ 路径 ' ,

query: {

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

参数名 2: ' 参数值 2'

}

})

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

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

this . $router . push ({

path: '/ 路径 / 参数值 '

})

编程式导航，如何跳转传参 ?
2. name 命名路由跳转
① query传参

this . $router . push ({

name:

' 路由名字 ' ,

query: {

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

参数名 2: ' 参数值 2'

}

})

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

this . $router . push ({

name: ' 路由名字 ' ,

params: {

参数名 : ' 参数值 ' ,

}

})

组件缓存 keep-alive

问题：从面经点到详情页，又点返回，数据重新加载了 → 希望回到原来的位置
原因：路由跳转后，组件被销毁了，返回回来组件又被重建了，所以数据重新被加载了
解决：利用 keep-alive 将组件缓存下来

1. keep-alive是什么
keep-alive 是 Vue 的内置组件，当它包裹动态组件时，会缓存不活动的组件实例，而不是销毁它们。
keep-alive 是一个抽象组件：它自身不会渲染成一个 DOM 元素，也不会出现在父组件链中。
2. keep-alive的优点
在组件切换过程中把切换出去的组件保留在内存中，防止重复渲染DOM，
减少加载时间及性能消耗，提高用户体验性

< template >

< div class = "h5-wrapper" >

< keep-alive >

< router-view ></ router-view >

</ keep-alive >

</ div >

</ template >

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

3. keep-alive的三个属性
① include ：组件名数组，只有匹配的组件会被缓存
② exclude ：组件名数组，任何匹配的组件都不会被缓存
③ max ：最多可以缓存多少组件实例

< template >

< div class = "h5-wrapper" : include ="[ 'LayoutPage' ] >

< keep-alive >

< router-view ></ router-view >

</ keep-alive >

</ div >

</ template >