Vue小节六

路由的封装抽离

目标：将路由模块抽离出来。

好处：拆分模块，利于维护。

 快速引入组件：
基于@指代 src目录,从 src目录出发找组件

声明式导航﹣导航链接

需求：实现导航高亮效果
 vue - router 提供了一个全局组件 router - link （取代 a 标签）
①能跳转，配置 to 属性指定路径（必须）。本质还是 a 标签， to 无需＃
②能高亮，默认就会提供高亮类名，可以直接设置高亮样式

声明式导航﹣两个类名

① router-link-active 模糊匹配（用的多）
to="/my"可以匹配 /my /my/a/my/b

② router-link-exact-active 精确匹配
to="/my"仅可以匹配 /my

router - link 的两个高亮类名太长，定制方法：

 const router = new VueRouter ({ 
routes: [...],
linkActiveClass: "类名1",
linkExactActiveClass:"类名2"
})

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

linkActiveClass 模糊匹配类名自定义
 linkExactActiveClass 精确匹配类名自定义

声明式导航 - 跳转传参

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

1．查询参数传参
①语法格式如下
● to="/path？参数名＝值＆参数名2＝值"

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

2．动态路由传参
配置动态路由

/path/:参数名

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

配置导航链接

to="/path／参数值"

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

$route.params．参数名

动态路由参数可选符

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

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

Vue路由 - 重定向 

问题：网页打开，url 默认是／路径，未匹配到组件时，会出现空白
说明：重定向 →匹配path后，强制跳转path路径
语法：{path: 匹配路径，redirect: 重定向到的路径}

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 （以后上线需要服务器端支持）

const router = new VueRouter({
routes,
mode: "history"})

编程式导航﹣基本跳转 

如何实现点击按钮跳转
编程式导航：用JS代码来进行跳转
两种语法：
1path 路径跳转

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

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

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

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

编程式导航 ﹣路由传参 

实现:点击搜索按钮，跳转需要传参

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

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

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

name 命名路由跳转传参

小结

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 

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：最多可以缓存多少组件实例

 ESlint代码规范 

字符串使用单引号     'abc'

无分号                       const name ='zs'

关键字后加空格          if (name ='ls') {...}

函数名后加空格          function name (arg) {...}

坚持使用全等             === 摒弃＝=      

代码规范错误

①手动修正
根据错误提示来一项一项手动修改纠正。
如果你不认识命令行中的语法报错是什么意思，根据错误代码去［ESLint 规则表］中查找其具体含义。
② 自动修正
基于 vscode 插件ESLint高亮错误，并通过配置自动帮助我们修复错误。