Vue实现面经基础版案例（路由+组件缓存）

一、面经基础版-案例效果分析

1.面经效果演示

2.功能分析

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

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

1.配置路由

• 首页和面经详情页，两个一级路由
• 首页内嵌套4个可切换的页面（嵌套二级路由）

2.实现功能

• 首页请求渲染
• 跳转传参 到 详情页，详情页动态渲染
• 组件缓存，性能优化

App是第一个页面，首页和面经详情是直接渲染到App页面上的，所以把这两个页面定为一级路由渲染的页面，而首页中有四个导航按钮，是渲染到首页上的，所以定为二级路由。

二、面经基础版-一级路由配置

1.把文档中准备的素材拷贝到项目中

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

...
import Layout from '@/views/Layout.vue'
import ArticleDetail from '@/views/ArticleDetail.vue'
...


const router = new VueRouter({
  routes: [
    {
      path: '/',
      component: Layout
    },
    {
      path: '/detail',
      component: ArticleDetail
    }
  ]
})
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

三、面经基础版-二级路由配置

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

1.使用场景

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

2.语法

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

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

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

const router = new VueRouter({
  routes: [
    {
      path: '/',
      component: Layout,
      children:[
        //children中的配置项 跟一级路由中的配置项一模一样 
        {path:'xxxx',component:xxxx.vue},
        {path:'xxxx',component:xxxx.vue},
      ]
    }
  ]
})
1
2
3
4
5
6
7
8
9
10
11
12
13

技巧：二级路由应该配置到哪个一级路由下呢？

这些二级路由对应的组件渲染到哪个一级路由下，children就配置到哪个路由下边

2.配置二级路由的出口

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

Layout.vue

1
2
3
4
5
6
7
8

3.代码实现

router/index.js

...
import Article from '@/views/Article.vue'
import Collect from '@/views/Collect.vue'
import Like from '@/views/Like.vue'
import User from '@/views/User.vue'
...

const router = new VueRouter({
  routes: [
    {
      path: '/',
      component: Layout,
      redirect: '/article',
      children:[
        {
          path:'/article',
          component:Article
        },
        {
          path:'/collect',
          component:Collect
        },
        {
          path:'/like',
          component:Like
        },
        {
          path:'/user',
          component:User
        }
      ]
    },
    ....
  ]
})

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36

Layout.vue

1
2
3
4
5
6
7
8
9
10
11
12
13
14

四、面经基础版-二级导航高亮

1.实现思路

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

2.代码实现

Layout.vue

....
    


1
2
3
4
5
6
7
8
9
10
11
12
13

五、面经基础版-首页请求渲染

1.步骤分析

1.安装axios

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

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

4.页面动态渲染

2.代码实现

1.安装axios

yarn add axios 或npm i axios

2.接口文档

请求地址: https://mock.boxuegu.com/mock/3083/articles
请求方式: get
1
2

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

 data() {
    return {
      articelList: [],
    }
  },
  async created() {
  	// 解构赋值
    const {  data: { result: { rows } }} = await axios.get('https://mock.boxuegu.com/mock/3083/articles')
    this.articelList = rows
  },
1
2
3
4
5
6
7
8
9
10

4.页面动态渲染

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

六、面经基础版-查询参数传参

1.说明

跳转详情页需要把当前点击的文章id传给详情页，获取数据

• 查询参数传参 this.$router.push(‘/detail?参数1=参数值&参数2=参数值’)
• 动态路由传参 先改造路由 在传参 this.$router.push(‘/detail/参数值’)

2.查询参数传参实现

Article.vue

1
2
3
4
5
6
7
8
9

ArticleDetail.vue

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

七、面经基础版-动态路由传参

1.实现步骤

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

2.代码实现

改造路由

router/index.js

...
  {
      path: '/detail/:id',
      component: ArticleDetail
  }
1
2
3
4
5

Article.vue

       ....

1
2
3
4
5

ArticleDetail.vue

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

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

ArticleDetail.vue

1
2
3
4
5
6

八、面经基础版-详情页渲染

1.实现步骤分析

• 导入axios
• 查看接口文档
• 在created中发送请求
• 页面动态渲染

2.代码实现

接口文档

 请求地址: https://mock.boxuegu.com/mock/3083/articles/:id
 请求方式: get
1
2

在created中发送请求

 data() {
    return {
      articleDetail:{}
    }
  },
  async created() {
    const id = this.$route.params.id
    const {data:{result}} = await axios.get(
      `https://mock.boxuegu.com/mock/3083/articles/${id}`
    )
    this.articleDetail = result
  },
1
2
3
4
5
6
7
8
9
10
11
12

页面动态渲染

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

九、面经基础版-缓存组件

1.问题

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

2.原因

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

3.解决方案

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

4.什么是keep-alive

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

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

优点：

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

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

App.vue

1
2
3
4
5
6
7

问题：

缓存了所有被切换的组件

5.keep-alive的三个属性

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

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

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

App.vue

1
2
3
4
5
6
7

6.额外的两个生命周期钩子

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

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

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

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

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

7.总结

1.keep-alive是什么

2.keep-alive的优点

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

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