Vue 案例面试经验基础版

步骤及其操作方法：

1、配一级路由

首先检查我们是否有各个路由组件，然后我们在路由模块配置一级路由
操作步骤：
1. 引入组件 import ... from .. [见下图1]
2. 在routes中配置路由 path: '...', component: ... [见下图2]
3. 然后配置默认页面将Layout页面配置为默认页面 path: '/', component: Layout

2、配二级路由

在一级路由上面添加 children 里面添加二级路由，配置规则，之后配置路由出口和导航高亮 router-link
操作步骤：
1. 首先配置路由规则，在一级路由Layout规则内的children中配置二级路由规则 [见下图1]
2. 配置二级路由出口，在Layout组件中配置二级路由出口 router-link [见下图2]
3. 配置二级路由重定向，默认页面
4. 导航高亮给router-link自带类名中的模糊匹配，设置高亮颜色 [见下图3]

3、首页渲染请求

axios 请求获取储存数据，然后使用v-for将储存好的数据渲染到页面
请求地址 https://mock.boxuegu.com/mock/3083/articles
请求方式 get
操作步骤：
1. 首先导入axios包 [见下图1]
2. 使用axios请求获取数据，将数据保存到 article 数组数据中 [见下图2][见下代码1]
3. 使用v-for 渲染数据到页面，即可完成页面展示 [见下图3]

async created() {
    const res = await axios.get("https://mock.boxuegu.com/mock/3083/articles");
    this.article = res.data.result.rows;
  }

4、跳转传参到详情页，详情页渲染

接下来，在每个页面添加跳转按钮，跳转进入详情页，传递id参数到新页面，之后使用通过id查询请求来获取详情数据，之后将数据渲染到页面中。
接口地址： https://mock.boxuegu.com/mock/3083/articles/:id
请求方式： get
操作步骤：
1. 在文章页添加点击监听，当点击时，跳转一级路由详情页，之后将id使用动态路由传递参数 [见下图1]
2. 在详情页使用axios请求，使用id查询参数，将数据保存到article对象中 [见下图2][见下代码1]
3. 最后将数据拉出来，直接模板字符串渲染页面 [见下图3]
4. 最后给返回按钮添加点击监听事件

<script>
// 请求地址: https://mock.boxuegu.com/mock/3083/articles/:id
// 请求方式: get
import axios from "axios";
export default {
  name: "ArticleDetailPage",
  data() {
    return {
      article: {},
    };
  },
  async created() {
    this.article = {};
    const id = this.$route.params.id;
    const { data } = await axios.get(
      `https://mock.boxuegu.com/mock/3083/articles/${id}`
    );
    this.article = data.result;
  },
};
</script>

5、组件缓存，优化性能

每次点击返回按钮，并不会回到刚刚浏览的位置，所以我们需要添加缓存页面，将我们没有浏览的页面缓存起来，等到我们需要浏览的时候，再将缓存提出来继续浏览，使用<keep-alive>标签。
操作步骤：
1. 使用<keep-alive>标签，将我们需要缓存的页面包裹
2. 给他添加合适的属性，选择缓存的页面 :include="['LayoutPage']" [见下图2]