综合练习 - 面经基础版 配置路由，跳转传参，组件缓存keep-alive及其对应的两个钩子

综合练习 - 面经基础版

主要用于练习路由的配置，参数的传递，demo已经上床gitee，仓库网址： simple_mj: 主要用于练习路由的配置，参数的传递 (gitee.com)
SSH： [email protected]:Scurryniubi/simple_mj.git

首页：一级

• 面经：二级

• 收藏：二级

• 喜欢：二级

• 我的：二级

文章详情：一级

配置一级路由

配置首页 和 详情页两个一级路由

const router = new VueRouter({
  routes: [
    {
      path: '/',
      component: Layout
    },
    {
      path: '/detail',
      component: ArticleDetail
    }
  ]
})

配置二级嵌套路由

目标: 在现有的一级路由下, 再嵌套二级路由

利用 children 配置二级路由

router/index.js

import Article from '@/views/article.vue';
import ArticleDetail from '@/views/article-detail.vue';
import Collect from '@/views/collect.vue';
import Like from '@/views/like.vue';
import User from '@/views/user.vue';
import Layout from '@/views/layout.vue';
import Vue from 'vue'
import VueRouter from "vue-router";
Vue.use(VueRouter)

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

export default router

配置路由出口，配置导航链接, a 标签 替换成 router-link

views/layout.vue

动态渲染首页

1 安装 axios

yarn  add  axios

2 接口文档说明：

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

3 data中提供数据， created 中发送请求，获取数据

src/views/article.vue

4 结合数据动态渲染

src/views/Article.vue

跳转传参到详情页

1 修改详情页路由， 改成动态路由

router/index.js

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

2 注册点击事件，跳转传递参数

src/views/Article.vue

3 获取解析参数

src/views/ArticleDetail.vue

export default {
  name: 'ArticleDetailPage',
  created() {
    console.log(this.$route.params.id)
  }
};

4 点击返回键，返回上一页

src/views/ArticleDetail.vue

<

动态渲染详情页

接口文档说明：

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

1 发送请求获取数据

src/views/ArticleDetail.vue

import axios from 'axios';
export default {
  name: 'article-detail-page',
  data() {
    return {
      article: {}
    };
  },
  async created() {
    this.article = {}
    const { data } = await axios.get(
      `https://mock.boxuegu.com/mock/3083/articles/${this.$route.params.id}`,
    );
    this.article = data.result;
  },
};

2 页面渲染

src/views/ArticleDetail.vue

组件缓存 keep-alive

基本语法

如果希望组件被缓存下来，可以在外面包一个 keep-alive 组件

src/views/Layout.vue

keep-alive对应的两个钩子

当组件被keep-alive管理时，会多出两个生命周期钩子，activated / deactivated

src/views/Article.vue

export default {
  name: 'ArticlePage',
  data() {
    return {
      articles: []
    };
  },
  async created() {
    const { data } = await axios.get(
      'https://mock.boxuegu.com/mock/3083/articles',
    );
    this.articles = data.result.rows;
    console.log(this.articles)
  },
  activated() {
    console.log('缓存组件被激活')
  },
  deactivated() {
    console.log('缓存组件被隐藏')
  }
};