面经基础版案例(路由，请求渲染，传参，组件缓存)

1.案例效果分析

2.配置一级路由（首页，详情）

把首页配成一个路由 → 注意项关于'/'

import Vue from 'vue'
import VueRouter from "vue-router";


import Layout from '@/views/Layout'
import ArticleDetail from '@/views/ArticleDetail'
Vue.use(VueRouter)

const router = new VueRouter({
  routes: [
    {
      path:'/',//首页可以配成一个/
      component: Layout //渲染一个组件
    },
    {
      path:'/detail',
      component:ArticleDetail
    }
  ]
})

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

3.配置二级路由

如果要配嵌套路由可以直接写一个配置项children

import Vue from 'vue'
import VueRouter from "vue-router";


import Layout from '@/views/Layout'
import Article from '@/views/Article'
import Collect from '@/views/Collect'
import Like from '@/views/Like'
import User from '@/views/User'
import ArticleDetail from '@/views/ArticleDetail'
Vue.use(VueRouter)

const router = new VueRouter({
  //  如果访问到 /artucle这个路径时，就匹配展示Article组件
  routes: [
    {
      path:'/',//首页可以配成一个/
      component: Layout, //渲染一个组件
      //通过 children 配置项，可以配置嵌套子路由
      //配置嵌套子路由分成两步
      //1.在children配置项中配置规则
      //2.准备二级路由出口
      children:[
        {
          path:'/article',
          component:Article
        },
        {
          path:'/collect',
          component:Collect
        },
        {
          path:'/like',
          component:Like
        },
        {
          path:'/user',
          component:User
        },
      ]
    },
    {
      path:'/detail',
      component:ArticleDetail
    }
  ]
})

export default router
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
37
38
39
40
41
42
43
44
45
46
47
48
49

下面是首页二级路由出口

<template>
  <div class="h5-wrapper">
    <div class="content">
      <!-- 不希望写死，也要换成路由组件，二级路由出口 ,就会展示匹配到的二级路由组件 -->
      <router-view></router-view>
    </div>

</template>
1
2
3
4
5
6
7
8

4.导航高亮效果

1.将a标签换成router-link，要加to属性
2.结合高亮类名，实现高亮效果（router-link-active模糊匹配）

layout.vue
<template>
  <div class="h5-wrapper">
    <div class="content">
      <!-- 不希望写死，也要换成路由组件，二级路由出口 ,就会展示匹配到的二级路由组件 -->
      <router-view></router-view>
    </div>
    <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>
  </div>
</template>

<style>
    a.router-link-active{
      color: palevioletred;
    }
</style>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

5.首页的请求渲染

首页的请求渲染其实指的是嵌套二级路由中的面经里面的文章列表，就是组件Article.vue

Article.vue
<template>
  <div class="article-page">
    <div
      v-for="item in articles"
      :key="item.id"
      class="article-item"
      >
      <div class="head">
        <img :src="item.creatorAvatar" alt="" />
        <div class="con">
          <p class="title">{{ item.stem }}</p>
          <p class="other">{{ item.creatorName }} | {{ item.createdAt }}</p>
        </div>
      </div>
      <div class="body">
         {{ item.content }}
      </div>
      <div class="foot">点赞 {{ item.likeCount }} | 浏览 {{ item.views }}</div>
    </div>
  </div>
</template>

<script>
import axios from 'axios';

//首页请求渲染
//1.用axios请求，安装axios
//2.看对应的接口文档，确认请求方式和地址和参数
// 请求地址: https://mock.boxuegu.com/mock/3083/articles
// 请求方式: get
//3.具体的确认完了，在created中发请求，获取数据，然后存起来
//4.页面动态渲染
export default {
  name: 'ArticlePage',
  async created () {
    const res = await axios.get('https://mock.boxuegu.com/mock/3083/articles')
    this.articles = res.data.result.rows
  },
  data () {
    return {
      articles:[

      ]//把拿到的数据存到里面
    }
  }
}
</script>

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
37
38
39
40
41
42
43
44
45
46
47
48
49

6.传参（查询参数 $ 动态路由）

1. 先给文章注册点击事件
2. 有两种传参方式：

第一种：查询参数传参 ?参数=参数 通过 this.$route.query.参数名 获取（更适合多个参数的情况）

@click="$router.push(`/detail?id=$(item.id)`)"

可以在ArticlDetail.vue中获取一下

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/blog/article/detail/55906