本文接续Day5项目继续

路由之重定向与404页面

路由的匹配从上至下

直接访问 http://localhost:8080时，应该要去首页，
需要配置路由的重定向，让他指向首页的路由
创建一个404页面 – src/views/notfound/index.vue
配置路由规则

声明式导航底部跳转路由

声明式导航 (） – 标签跳转
编程式导航 window.location.href="" ---- js跳转

vue路由的声明式导航使用语法如下

<router-link to=""></router-link>
补充：router-link 默认会被渲染为 a 标签
补充：一般情况，使用router-link之后标签发生改变，样式就一定会发生改变，如果想要保持原样式，就需要把router-link 修改为之前的标签，使用 tag 属性
? 点击已经可以切换路由了，但是不知道点了哪一个，视觉效果不如意

最好的方式就是有个明显的选中的状态的变化
审查元素得知，被选中的路由会自动添加一个样式

扫描二维码关注公众号，回复： 10034795 查看本文章
给底部选项卡添加选中的样式

首页添加产品列表

设计产品的列表组件src/components/prolist.vue

<template>
  <ul class="prolist">
    <li class="proitem">
      <div class="itemimg">
        <img src="" alt="">
      </div>
      <div class="iteminfo">
        <h3>标题</h3>
      </div>
    </li>
  </ul>
</template>

<script>
export default {
}
</script>

<style lang="scss">
@import '@/lib/reset.scss';
.prolist {
  .proitem {
    @include rect(100%, 1rem);
    // 实现真正的1px的下边框 - 1个物理像素
    // 面试高频问题 css像素  物理像素 屏幕分辨率
    @include border(0 0 1px 0, #ccc, solid);
    @include flexbox();
    @include box-sizing(border-box);
    .itemimg {
      @include rect(1rem, 1rem);
      img {
        @include rect(0.9rem, 0.9rem);     
        @include display(block);
        @include border(1px, #ccc, solid);
        @include margin(0.05rem);
        @include box-sizing(border-box);
      }
    }
    .iteminfo {
      @include flex();
      @include padding(0.06rem 0.05rem);
    }
  }
}
</style>

首页使用产品列表组件

数据请求

ajax 、 vue-resouce 、fetch 、axios

axios 在vue项目中的使用

安装axios

cnpm i axios -S

封装axios ---- src/api/request.js
开发环境和生产环境请求的接口地址是不一样

可以通过 process.env.NODE_ENV 判定环境

process.env 是node环境自带的，NODE_ENV是自己添加的
如果需要对请求设置拦截器（统一处理请求（设置loading动画）和响应（影藏loading动画））
封装页面数据请求的方法

/**
 * 获取首页的列表数据
 * import { getProlist } from '@/api'
 * 数据接口参考： http://localhost:3000/apidoc/#api-pro-GetApiPro
 * @param {Object} params 由limit和count组成的对象
 */ 
import request from './request'

export function getProlist (params) {
  console.log(params)
  const data = params || { limit: 10, count: 0 }
  return request({
    url: '/pro',
    method: 'get',
    params: data
  })
}

首页中请求数据
首页渲染数据
子组件接收数据并且渲染
？为什么不在子组件中直接请求数据，而是由父组件去请求数据，再传值给子组件？

一个组件可以多个地方复用，数据由父组件提供，跟子组件就没关系，子组件只负责接收数据并且渲染即可，此时子组件也可以称之为叫做UI组件
完善一下列表的组件
添加热推的图标
有标识的应该在最前面，但是后端给的数据就是这样，只能前端去处理数据，当获取到数据之后，先行处理数据再赋值
如果后期做上拉加载时也有热推产品怎么办，这个设计的框架有关
首页分为热推区域和列表区域
删除产品列表中的标识
如果需要改变热推区域的布局
或者添加一个 hotlist 组件