外卖webAPP项目优化(五)

一，当点击点餐，评价，商家，路由组件时，会发送请求，我们需要点击一次时，对之前一个路由组件进行缓存，用到keep-alive

主要用于保留组件状态或避免重新渲染。

<template>
  <div>
    <ShopHeader></ShopHeader>

    <div class="tab">
      <div class="tab-item">
        <router-link to="/shop/goods"> 点餐</router-link>
      </div>
      <div class="tab-item">
        <router-link to="/shop/shopratings"> 评价</router-link>
      </div>
      <div class="tab-item">
        <router-link to="/shop/shopinfo"> 商家</router-link>
      </div>
    </div>
    <keep-alive>
      <router-view></router-view>
    </keep-alive>
    
  </div>
</template>

 

二，当我们频繁点击点餐，评价，商家，路由默认用push记录添加的url, 不会一次性返回到首页，router-link有一个replace属性

 

 

replace在routre-link标签中添加后，页面切换时不会留下历史记录

<template>
  <div>
    <ShopHeader/>
    <div class="tab">
      <div class="tab-item">
        <router-link to="/shop/goods" replace>点餐</router-link>
      </div>
      <div class="tab-item">
        <router-link to="/shop/ratings" replace>评价</router-link>
      </div>
      <div class="tab-item">
        <router-link to="/shop/info" replace>商家</router-link>
      </div>
    </div>
    <keep-alive>
      <router-view/>
    </keep-alive>
  </div>
</template>

 

三，路由懒加载，一般大的路由组件，才会加该操作，比如外层的路由组件

// import MSite from '../pages/MSite/MSite.vue'
// import Search from '../pages/Search/Search.vue'
// import Order from '../pages/Order/Order.vue'
// import Profile from '../pages/Profile/Profile.vue'

const MSite = () => import('../pages/MSite/MSite.vue')
const Search = () => import('../pages/Search/Search.vue')
const Order = () => import('../pages/Order/Order.vue')
const Profile = () => import('../pages/Profile/Profile.vue')

 routes: [
    {
      path: '/msite',
      component: MSite, // 返回路由组件的函数, 只有执行此函数才会加载路由组件, 这个函数在请求对应的路由路径时才会执行
      meta: {
        showFooter: true
      }
    },

 

四，路由懒加载

安装，npm install --save vue-loader

在main.js引入，

import VueLazyload from 'vue-lazyload'
import loading from './assets/imgs/loading.gif'
Vue.use(VueLazyload, {
loading
})

    <div class="food">
      <div class="food-content">
        <div class="image-header">
          <img
           v-lazy="food.image" 
          />
          <p class="foodpanel-desc">{{food.info}}</p>
          <div class="back" @click="toggleShow">
            <i class="iconfont icon-arrow_left"></i>
          </div>
        </div>

 

五，利用vue的过滤器将时间戳转换成日期格式

第一种，不用第三方插件，data-farmet为过滤器的名称， originval为时间戳，return有格式的日期

在main.js中设置

全局自定义filter过滤器
Vue.filter('data-farmet', function(originVal){
  const dt = new Date(originVal)
  const y = dt.getFullYear()
  const m = dt.getMonth() + 1
  const d = dt.getDate()
  const hh = dt.getHours()
  const mm = dt.getMinutes()
  const ss = dt.getSeconds()
  return `${y}-${m}-${d} ${hh}:${mm}:${ss}`
})

 

第二种，借助moment第三方日期插件

安装moment,  npm i --save moment

在main.js设置

import moment from 'moment'

Vue.filter('data-farmet',function(value,formatStr = 'YYYY-MM-DD HH:mm:ss'){
  return moment(value).format(formatStr)
})

在模板中展示，左边是时间戳， 右边是过滤器名称

<div class="time">{{rating.rateTime | data-farmet}}</div>

 

但是引入moment第三方库的容量太大了，我们可以引入轻量级的日期插件

安装，npm i --save date-fns

// import moment from 'moment'
// import {format} from 'date-fns'
// 再次缩小文件
import format from 'date-fns/format'

Vue.filter('data-farmet', function (value, formatStr='yyyy-mm-dd HH:mm:ss') {
  // return moment(value).format(formatStr)
  return format(value, formatStr)
})