day06

day06

目录

• day06
  • 声明式导航 — 导航链接
    • 需求
    • 解决方案
    • 通过 router-link 自带的两个样式进行高亮
  • 声明式导航 — 两个类名
    • router-link-active
    • router-link-exact-active
  • 声明式导航 — 自定义类名（了解）
    • 问题
    • 解决方案
    • 代码演示
  • 声明式导航 — 查询参数传参
    • 跳转传参
    • 查询参数传参
    • 代码演示
  • 声明式导航 — 动态路由传参
    • 动态路由传参方式
    • 查询参数传参 VS 动态路由传参
  • 动态路由参数的可选符（了解）
  • Vue 路由 — 重定向
    • 问题
    • 解决方案
    • 语法
    • 代码演示
  • Vue 路由 — 404
    • 作用
    • 位置
    • 语法
    • 代码示例
  • Vue 路由 — 模式设置
    • 问题
    • 语法
  • 编程式导航 — 两种路由跳转方式
    • 语法
    • path 路径跳转语法
    • name 命名路由跳转语法
  • 编程式导航 — path 路径跳转传参
    • 问题
    • 两种传参方式
    • 传参
    • path 路径跳转传参（query 传参）
    • path 路径跳转传参（动态路由传参）
  • 编程式导航 — name 命名路由传参
    • name 命名路由跳转传参（query 传参）
    • name 命名路由跳转传参（动态路由传参）
    • 总结
  • 面经基础版 — 案例效果分析
    • 功能分析
    • 实现思路分析：配置路由 + 功能实现
  • 面经基础版 — 一级路由配置
  • 面经基础版 — 二级路由配置
    • 使用场景
    • 语法
    • 举例
  • 面经基础版 — 二级导航高亮
  • 面经基础版 — 首页请求渲染、获取数据
    • 代码实现
  • 面经基础版 — 查询参数传参
    • 查询参数传参实现
    • 动态路由传参
    • 代码实现
    • 额外优化功能点 — 点击回退跳转到上一页
  • 面经基础版 — 缓存组件
    • 问题
    • 原因
    • 解决方案
    • 关于 keep-alive
    • keep-alive 的三个属性（按需所配）
    • 额外的两个生命周期钩子
  • VueCli 自定义创建项目
  • ESlint 代码规范及手动修复
    • • JavaScript Standard Style 规范说明
      • 代码规范错误
      • 手动修正
  • 通过 eslint 插件来实现自动修正

声明式导航 — 导航链接

需求

• 实现导航高亮效果
• 如果使用 a 标签进行跳转的话，需要给当前跳转的导航加样式，同时要移除上一个 a 标签的样式，太麻烦

解决方案

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

• 能跳转，配置 to 属性指定路径（必须指定），本质还是 a 标签，写法 to 无需加 #

• 相比 a 标签的好处就是：能高亮，默认就会提供高亮类名，可以直接设置高亮样式

• 语法： <router-link to="path的值">xxx</router-link>

  <div>
    <div class="footer_wrap">
      <router-link to="/find">发现音乐</router-link>
      <router-link to="/my">我的音乐</router-link>
      <router-link to="/friend">朋友</router-link>
    </div>
    <div class="top">
      <!-- 路由出口 → 匹配的组件所展示的位置 -->
      <router-view></router-view>
    </div>
  </div>
  

通过 router-link 自带的两个样式进行高亮

• 使用 router-link 跳转后，我们 F12 发现。当前点击的实际代码就是 a 标签默认加了两个 class 的值 router-link-exact-active和router-link-active（用于高亮的类，会自行加删）

• 我们可以给任意一个 class 属性添加高亮样式即可实现功能

  • 如：

    .footer_wrap a.router-link-active {
      background-color: red;
    }
    

声明式导航 — 两个类名

• 当我们使用 <router-link></router-link> 跳转时，自动给当前导航加了两个类名：

router-link-active

• 模糊匹配（用的多）

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

• 只要是以 /my 开头的路径 都可以和 to="/my" 匹配到

• 使用场景：在主导航栏点击高亮后，次级导航栏再点击高亮时，主导航栏的高亮不会取消

router-link-exact-active

• 精确匹配
  • to="/my" 仅可以匹配到 /my

声明式导航 — 自定义类名（了解）

问题

• router-link 的两个高亮类名太长了，能否定制

解决方案

• 在创建路由对象时，额外配置两个配置项即可： linkActiveClass 和 linkExactActiveClass

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

代码演示

// 创建了一个路由对象
const router = new VueRouter({
  routes: [
    ...
  ], 
  linkActiveClass: 'active', // 配置模糊匹配的类名 active
  linkExactActiveClass: 'exact-active' // 配置精确匹配的类名 exact-active
})

• 这样再 F12 打开时就会发现是

  • class="exact-active active" 了

  • css 就是自定义的：

    .footer_wrap a.active {
      background-color: red;
    }
    

    • 即可

声明式导航 — 查询参数传参

• 在跳转路由时，进行传参
  • 例如：点击了按钮，需要把点击的内容带到详情页

跳转传参

• 可以通过两种方式，在跳转的时候把所需要的参数传到其他页面中

  • 查询参数传参

  • 动态路由传参

查询参数传参

• 传参：

  • <router-link to="/path?参数名=值"></router-link>

• 接受参数固定用法：

  • $route.query.参数名

代码演示

• Home.vue

<div class="hot-link">
  热门搜索：
  <router-link to="/search?key=xxx">xxx</router-link>
  <router-link to="/search?key=yyy">yyy</router-link>
  <router-link to="/search?key=xyx">xyx</router-link>
</div>

• Search.vue

<template>
  <div class="search">
    <p>搜索关键字: {{ $router.query.key }}</p>
    <p>搜索结果: </p>
    <ul>
      <li>.............</li>
    </ul>
  </div>
</template>

<script>
export default {
  created () {
    // 在created中，获取路由参数: this.$route.query.参数名
    console.log(this.$route.query.key);
  }
}
</script>

声明式导航 — 动态路由传参

动态路由传参方式

• 配置动态路由

  • 动态路由后面的参数可以随便起名，但要有语义（如下述的 words）

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

• 配置导航链接

  • to="/path/参数值"
  • 即：<router-link to="/search/xxx">xxx为想传的参数</router-link>

• 对应页面组件接受参数

  • $route.params.参数名
  • params 后面的参数名要和动态路由配置的参数保持一致（即上述的 words）
  • 即：console.log(this.$route.params.words);

查询参数传参 VS 动态路由传参

• 查询参数传参（比较适合传多个参数）
  • 跳转：to="/path?参数名=值&参数名2=值"（键值对方式）
  • 获取：$route.query.参数名
• 动态路由传参（优雅简洁，传单个参数比较方便）
  • 配置动态路由：path: "/path/:参数名"
  • 跳转：to="/path/参数值"
  • 获取：$route.params.参数名
• 注意：动态路由也可以传多个参数，但一般只传一个

动态路由参数的可选符（了解）

• /search/:words 表示，必须要传参数，即进入不到 #/search 地址的页面了

• 如果不传参数，也希望匹配到某页面（即可选的），可以加个可选符 " ？"

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

Vue 路由 — 重定向

问题

• 网页打开时， url 默认是 / 路径，未匹配到组件会出现空白（组件不存在就会出现空白）

解决方案

• 重定向：匹配 / 后, 强制跳转 /home 路径（也就是显示 /home 所指向的组件）

语法

{ path: 匹配路径, redirect: 重定向到的路径 },
比如：
{ path:'/' ,redirect:'/home' }

代码演示

const router = new VueRouter({
  routes: [
    { path: '/', redirect: '/home'},
 	 ...
  ]
})

Vue 路由 — 404

作用

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

位置

• 404 的路由，虽然配置在任何一个位置都可以，但一般都配置在其他路由规则的最后面

语法

• path: "*"（任意路径）— 前面不匹配就命中最后这个

import NotFind from '@/views/NotFind'

const router = new VueRouter({
  routes: [
    ...
    { path: '*', component: NotFound } //最后一个，*就表示任意，匹配NotFound组件
  ]
})

代码示例

• NotFound.vue

<template>
  <div>
    <h1>404 Not Found</h1>
  </div>
</template>

• router/index.js

...
import NotFound from '@/views/NotFound'
...

// 创建了一个路由对象
const router = new VueRouter({
  routes: [
     ...
    { path: '*', component: NotFound }
  ]
})

export default router

Vue 路由 — 模式设置

问题

• 路由的路径看起来不自然，有 #，想办法切成真正路径形式
  • hash 路由（默认），例如：http://localhost:8080/#/home
  • history 路由（常用），例如：http://localhost:8080/home（以后上线需要服务器端支持，开发环境 webpack 给规避掉了 history 模式的问题）

语法

const router = new VueRouter({
    mode:'histroy', //默认是 hash
    routes:[]
})

编程式导航 — 两种路由跳转方式

• 点击按钮跳转的实现，就像是点击登录到登录页面一样，这里通常就不会用导航链接了

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

  • 原来都是用 location.href=新链接 来实现，但 vue 这里是跳路由，本质上是在单页中，所以不能在这样用了，有专门的跳转方式

语法

• 两种语法：

  • path 路径跳转（简易方便）

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

path 路径跳转语法

• 特点：简易方便（直接往路由上跳）
• 写在按钮之类的方法事件上：

//简单写法：
this.$router.push('路由路径')
// 如：this.$router.push('/search')

//完整写法：
this.$router.push({
  path: '路由路径'
})

• 完整的写法在之后传参的时候会更适用

name 命名路由跳转语法

• 特点：适合 path 路径长、层级深的场景

• 前提：

  • 必须在路由规则中配置 name 配置项

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

  • 通过 name 来进行跳转

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

编程式导航 — path 路径跳转传参

问题

• 点击搜索按钮，跳转需要把文本框中输入的内容传到下一个页面

两种传参方式

• 查询参数
• 动态路由传参

传参

• 两种跳转方式，对于两种传参方式都支持：
  • path 路径跳转传参
  • name 命名路由跳转传参

path 路径跳转传参（query 传参）

// 简单写法（参数值可以是${双向绑定的参数值}）
this.$router.push('/路径?参数名1=参数值1&参数2=参数值2')

// 完整写法（更适合传参 —— 尤其是多个参数的时候，参数值可以是this.xxx动态）
this.$router.push({
  path: '/路径',
  query: {
    参数名1: '参数值1',
    参数名2: '参数值2'
  }
})

• 不管哪种，接受参数的方式依然是：$route.query.参数名

path 路径跳转传参（动态路由传参）

• 注意：前提是路由规则已经配置成动态路由的格式 /xx/:yy?

//简单写法（参数值可以是${双向绑定的参数值}）
this.$router.push('/路径/参数值')

//完整写法（参数值可以是${双向绑定的参数值}）
this.$router.push({
  path: '/路径/参数值'
})

• 接受参数的方式依然是：$route.params.动态路由的冒号后的命名yy

编程式导航 — name 命名路由传参

name 命名路由跳转传参（query 传参）

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

• 还是 $route.query.参数名

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

• 注意：前提是路由规则已经配置成动态路由的格式 /xx/:yy?

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

• 依旧是 $route.params.动态路由的冒号后的命名yy

总结

• 编程式导航，如何跳转传参：

• 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: '/路径/参数值'
    })
    

• name 命名路由跳转

  • query传参

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

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

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

面经基础版 — 案例效果分析

功能分析

• 通过演示效果发现，主要的功能页面有两个，一个是列表页，一个是详情页，并且在列表页点击时可以跳转到详情页
• 底部导航可以来回切换，并且切换时，只有上面的主题内容在动态渲染

实现思路分析：配置路由 + 功能实现

• 配置路由

  • 首页和面经详情页两个大页面，两个一级路由

  • 首页内嵌套四个可切换的小页面（嵌套二级路由）

  • 面经详情是单独的一个大页面

• 实现功能

  • 首页请求渲染

  • 跳转传参到详情页，详情页动态渲染

  • 组件缓存，性能优化

面经基础版 — 一级路由配置

• 针对 router/index.js 文件进行一级路由配置

...
import newFirst from '@/views/newFirst.vue'
import info from '@/views/info.vue'
...


const router = new VueRouter({
  routes: [
    {
      path: '/',
      component: newFirst
    },
    {
      path: '/info',
      component: info
    }
  ]
})

面经基础版 — 二级路由配置

• 二级路由也叫嵌套路由，当然也可以嵌套三级、四级 ...

使用场景

• 当在页面中点击链接跳转，只是部分内容切换时，我们可以使用嵌套路由

语法

• 在一级路由下，配置 children 属性即可
• 配置二级路由的出口

举例

• 在一级路由下，配置 children 属性

  • 注意：一级的路由 path 需要加 / 二级路由的 path 不需要加 /

    ...
    import xxxx from '@/views/xxxx.vue'
    import yyyy from '@/views/yyyy.vue'
    ...
    
    const router = new VueRouter({
      routes: [
        {
          path: '/',
          component: newFirst,
          // 别光记得二级路由，把主的显示忘了（加个重定向 —— 初进默认显示页面）
          redirect: '/xxxx'  
          children:[
            //children中的配置项 跟一级路由中的配置项一模一样 
            {path:'/xxxx',component:Xxxx},
            {path:'/yyyy',component:Yyyy},
          ]
        }
      ]
    })
    

• 注意配置了二级路由后不要忘了 / 时的显示，否则就是空白 —— 重定向

• 配置二级路由的出口 <router-view></router-view>

  • 当然此处的 <router-view></router-view> 和对应的 <a href> 写在一起

  • 注意： 配置了嵌套路由，一定配置对应的路由出口，否则不会渲染出对应的组件

• newFirst.vue

<template>
  <div class="wsad">
    <div class="content">
      <!-- 内容部分 -->
      <router-view></router-view>
    </div>
    <nav class="asdfg">
      <a href="#/xxxx">xxxx显示</a>
      <a href="#/yyyy">yyyy显示</a>
    </nav>
  </div>
</template>

面经基础版 — 二级导航高亮

• 将 a 标签替换成 <router-link></router-link> 组件，配置 to 属性，不用加 #
• 结合高亮类名实现高亮效果（推荐模糊匹配：router-link-active）

<nav class="tabbar">
  <router-link to="/article">面经</router-link>
  <router-link to="/collect">收藏</router-link>
  <router-link to="/like">喜欢</router-link>
  <router-link to="/user">我的</router-link>
</nav>

<style>
  // F12 可见渲染后真正样式，和内在真正作用的class
   a.router-link-active { 
      color: orange;
    }
</style>

面经基础版 — 首页请求渲染、获取数据

• 安装 axios 用来发请求

• 看接口文档，确认请求方式，请求地址，请求参数

• created 中发送请求，获取数据，存储到 data 中

• 页面动态渲染

代码实现

• 安装 axios

  • yarn add axios 或 npm i axios
  • i 就是 install

• 接口文档

请求地址: https://......
请求方式: get

• created 中发送请求，获取数据，存储到 data 中

 data() {
    return {
      articelList: [],
    }
 },

 async created() {
		const res = await axios.get('https://......')
		this.articelList = res.data.result.rows
 },

• 需要的时候调用 articelList 即可

面经基础版 — 查询参数传参

• 跳转详情页需要把当前点击的文章 id 传给详情页，获取数据（两种方式：）

  • 查询参数传参：this.$router.push('/detail?参数1=参数值&参数2=参数值')

  • 动态路由传参：先改造路由再传参 this.$router.push('/detail/参数值')

查询参数传参实现

• xxxx.vue

<template>
  ... 
      v-for="item in List" :key="item.id" 
      @click="$router.push(`/detail?id=${item.id}`)">
  ...
</template>

• xxxxDetail.vue

  created(){
    console.log(this.$route.query.id)
  }

动态路由传参

• 改造路由
• 动态传参
• 在详情页获取参数

代码实现

• 改造路由
• router/index.js

...
  {
      path: '/detail/:id',
      component: ArticleDetail
  }

• Article.vue 发送

<div class="article-item" 
     v-for="item in articelList" :key="item.id" 
     @click="$router.push(`/detail/${item.id}`)">
       ....
 </div>

• ArticleDetail.vue 接收

  created(){
    console.log(this.$route.params.id)
  }

额外优化功能点 — 点击回退跳转到上一页

• ArticleDetail.vue

<template>
  <div class="article-detail-page">
    <nav class="nav"><span class="back" @click="$router.back()">&lt;</span> 面经详情</nav>
     ....
  </div>
</template>

• 用 back() 返回即可

面经基础版 — 缓存组件

问题

• 从面经列表点到详情页，又点返回，数据重新加载了
• 现在想要试着、希望回到原来的位置
  • 不再重新加载

原因

• 当路由被跳转后，原来所看到的组件就被销毁了（会执行组件内的 beforeDestroy 和 destroyed 生命周期钩子），重新返回后组件又被重新创建了（会执行组件内的 beforeCreate，created，beforeMount，Mounted 生命周期钩子），所以数据被重又加载了

解决方案

• 利用 keep-alive 把原来的组件给缓存下来

关于 keep-alive

• keep-alive 是 Vue 的内置组件，当它包裹动态组件（也就是这里的 <router-view></router-view>）时，会缓存不活动的组件实例，而不是销毁它们

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

• 优点：

  • 在组件切换过程中把切换出去的组件保留在内存中，防止重复渲染 DOM
  • 减少加载时间及性能消耗，提高用户体验性

• App.vue

<template>
  <div class="">
    <keep-alive>
      <router-view></router-view>
    </keep-alive>
  </div>
</template>

• 存在问题：
  • 上述缓存了所有被切换的组件，很可能会出现错乱

keep-alive 的三个属性（按需所配）

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

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

  • 只写了不缓存的，所有一般都配合 max 使用

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

• 结合上述属性，App.vue：

<template>
  <div class="h5-wrapper">
    <keep-alive :include="['LayoutPage']">
<!--  或者是写数组：<keep-alive :include="keepArr">  -->
      <router-view></router-view>
    </keep-alive>
  </div>
</template>

额外的两个生命周期钩子

• keep-alive 的使用会触发两个生命周期函数
• activated 当组件被激活（使用）的时候触发 —— 进入这个页面的时候触发
• deactivated 当组件失活（不被使用）的时候触发 —— 离开这个页面的时候触发
  • 组件缓存后就不会执行组件的 created，mounted，destroyed 等钩子了
• 所以其提供了 actived 和 deactived 钩子，帮我们实现一些业务需求

VueCli 自定义创建项目

• 注意，这里的前提是 npm -v 正确显示版本，且 node.js 里有 vue.cmd

  • 一般下载了 node 就顺带安装了 npm（可以理解为一种 node.js 内置的一套包管理工具，就可以 npm xxx 下载依赖包了）
  • 没有 vue.cmd 就 npm install -g vue 安装好 vue
  • 再继续下一步安装脚手架

• 安装脚手架（已安装）

  npm install -g @vue/cli
  

  • 然后就可以 npm list vue 查看 vue 版本指令
  • vue -v 查看脚手架版本指令

• 创建项目

vue create 项目名

• 选项

Vue CLI v5.0.8
? Please pick a preset:
  Default ([Vue 3] babel, eslint)
  Default ([Vue 2] babel, eslint)
> Manually select features     这次选择自定义

• 手动选择下述四个（空格就是选中）

• 选择vue的版本

  3.x
> 2.x

• 是否使用 history 模式

• 选择 css 预处理

• 选择 eslint 的风格（eslint 代码规范的检验工具，检验代码是否符合规范）
• 比如：const age = 18; => 报错！多加了分号！后面有工具，一保存，全部格式化成最规范的样子

• 选择校验的时机（直接回车）

• 选择配置文件的生成方式（直接回车）

• 是否保存预设，下次直接使用？ => 不保存，输入 N

• 等待安装，项目初始化完成：绿色 success

• 启动项目

npm run serve

ESlint 代码规范及手动修复

• 代码规范：一套写代码的约定规则。例如：赋值符号的左右是否需要空格？一句结束是否是要加;？等
• ESLint：是一个代码检查工具，用来检查你的代码是否符合指定的规则（你和你的团队可以自行约定一套规则）
• 创建项目时，使用的是 JavaScript Standard Style 代码风格的规则

JavaScript Standard Style 规范说明

• 建议把：https://standardjs.com/rules-zhcn.html 看一遍，然后在写的时候, 遇到错误就查询解决

• 下面是这份规则中的一小部分：

  • 字符串使用单引号 — 需要转义的地方除外

  • 无分号

  • 关键字后加空格 — if (condition) { ... }

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

  • 坚持使用全等 === 摒弃 == 一 但在需要检查 null || undefined 时可以使用 obj == null

  • 等等

代码规范错误

• 如果你的代码不符合 standard 的要求会红色提醒

手动修正

• 如果不认识命令行中的语法报错是什么意思，可以根据错误代码（func-call-spacing, space-in-parens,.....）去 ESLint 规则列表中查找其具体含义
• 打开 ESLint 规则表，页面搜索这个代码，查找对该规则的一个释义

通过 eslint 插件来实现自动修正

• eslint 会自动高亮错误显示
• 通过配置，eslint会自动帮助我们修复错误

• 安装插件

• 如何配置

  • 左下角设置，点击右上角打开设置：settings.json

  • 在打括号内加入以下语句：

    // 当保存的时候，eslint自动帮我们修复错误
    "editor.codeActionsOnSave": {
        "source.fixAll": true
    },
    // 保存代码，不自动格式化
    "editor.formatOnSave": false
    

• 注意：eslint 的配置文件必须在根目录下，这个插件才能才能生效。打开项目必须以根目录打开，一次打开一个项目

• 注意：使用了 eslint 校验之后，把 vscode 带的那些格式化工具全禁用了 Beatify

• settings.json 参考：

{
    "window.zoomLevel": 2,
    "workbench.iconTheme": "vscode-icons",
    "editor.tabSize": 2,
    "emmet.triggerExpansionOnTab": true,
    // 当保存的时候，eslint自动帮我们修复错误
    "editor.codeActionsOnSave": {
        "source.fixAll": true
    },
    // 保存代码，不自动格式化
    "editor.formatOnSave": false
}