vue外卖二十四：功能完善：时间戳格式化filter、缓存路由组件对象、路由后退push改replace，解决多嵌套路由页面点返回多次无法一次退出到上一个页面民

本文主要是介绍vue外卖二十四：功能完善：时间戳格式化filter、缓存路由组件对象、路由后退push改replace，解决多嵌套路由页面点返回多次无法一次退出到上一个页面民，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

一、时间戳格式化filter

评价列表页面的发布时间：1469281964000，格式化为人可看懂的时间

1）新建文件并创建一个filter实例 src/filter/index.js

import Vue from 'vue'// 【1】将时间戳转日期格式的过滤器
Vue.filter('date-format', (dataStr) => {var time = new Date(dataStr);function timeAdd0(str) {if (str < 10) {str = '0' + str;}return str}var y = time.getFullYear();var m = time.getMonth() + 1;var d = time.getDate();var h = time.getHours();var mm = time.getMinutes();var s = time.getSeconds();return y + '-' + timeAdd0(m) + '-' + timeAdd0(d) + ' ' + timeAdd0(h) + ':' + timeAdd0(mm) + ':' + timeAdd0(s);
})

2）导入filter到src/main.js

import './filter' //直接导入即可

3）src/page/shop/rating/rating.vue 使用filter格式化时间戳

 <div class="time">{{rating.rateTime | date-format}}</div>

效果：http://localhost:8080/#/shop/rating

1469281964000 显示时间为：2016-07-23 21:52:44

此外还可用现成的库来格式化时间戳

moment（大）或 date-fns（小）

// import moment from 'moment'
// import {format} from 'date-fns'
import format from 'date-fns/format'
import Vue from 'vue'
Vue.filter('dateString', function (value, formatStr) {
// return moment(value).format(format || 'YYYY-MM-DD HH:mm:ss')
return format(value, formatStr || 'YYYY-MM-DD HH:mm:ss')
})

二、缓存路由组件对象

作用: 复用路由组件对象, 复用路由组件获取的后台数据
有时候我们不希望组件被重新渲染影响使用体验；或者处于性能考虑，避免多次重复渲染降低性能。而是希望组件可以缓存下来,维持当前的状态。这时候就可以用到keep-alive组件。

src/page/shop/shop.vue

在外层套个：keep-alive标签即可

		<keep-alive><router-view/></keep-alive>

三、路由后退push改replace，解决多嵌套路由页面点返回多次无法一次退出到上一个页面民

shop页面连续点多次子组件再后退时无法快速退出到首页
在这里插入图片描述

shop.vue router-link 标签加个 replace属性即可把push路由改为替换路由

<div class="tab"><!-- tab1 --><div class="tab-item"><router-link to="/shop/goods" replace>点餐</router-link></div><!-- tab2 --><div class="tab-item"><router-link to="/shop/rating" replace>评价</router-link></div><!-- tab3 --><div class="tab-item"><router-link to="/shop/info" replace>商家</router-link></div></div>