记录vue的一些踩坑日记

记录vue的一些踩坑日记

安装Jq

npm install jquery --save

vue列表跳转到详情页，再返回列表的时候不刷新页面并且保持原位置不变；

解决：使用keepAlive

1. 在需要被缓存的页面的路由中添加：keepAlive: true,

 {
   
        path: '/viewExamine',
        name: 'viewExamine',
        component: () => import('@/views/viewExamine'),
        meta: {
   
          keepAlive: true, 
        },
      },

2. 记录位置

const router = new VueRouter({
   
  // mode: 'history',
  mode: 'hash', //刷新之后找不到页面用这个
  base: process.env.BASE_URL,
  routes,
  //记录位置
  scrollBehavior: (to, from, savedPosition) => {
    
    if (savedPosition) {
        
      return savedPosition
    } else {
    
      return {
    x: 0, y: 0 }
    }
  }
})

3. 在app.vue中：

<template>
  <div id="app" v-cloak>
    <!-- 可以被缓存的视图组件 -->
    <keep-alive>
      <router-view v-if="$route.meta.keepAlive"></router-view>
    </keep-alive>
    <!-- 不可以被缓存的视图组件 -->
    <router-view v-if="!$route.meta.keepAlive"></router-view> 
  </div>
</template>

然后，就可以啦，问题就解决了（返回列表页不会触发created）

vue退出登录后,如何清空keep-alive缓存

问题描述:在项目中,有个页面用到了keep-alive。但是,当我点击退出登录,切换了其他账号登录后,保留的还是上一个账号的数据信息,最终采取了以下方法解决的。

原文：https://blog.csdn.net/weixin_50446072/article/details/125541134

代码如下:(app.vue)

<template>
  <div id="app">
    <keep-alive v-if="isLoggedIn">
      <router-view v-if="$route.meta.keepAlive"></router-view>
    </keep-alive>
    <router-view v-if="!$route.meta.keepAlive||!isLoggedIn"></router-view>
  </div>
</template>

<script>
export default {
     
  data() {
     
    return {
     
      isLoggedIn: false,
    };
  },
  watch: {
     
    $route(to, from) {
     
      // if the route changes...
      let token = localStorage.getItem("court-token") || "";
      if (token) {
     
        // firebase returns null if user logged out
        this.isLoggedIn = true;
      } else {
     
        this.isLoggedIn = false;
      }
    },
  },
};
</script>

转化时间戳

1. 过滤器

Vue.filter('dateFormat_sfm', time => {
   
  //年月日时分秒
  var now = new Date(time);
  var nian = now.getFullYear();
  var yue = (now.getMonth() + 1).toString().padStart(2, "0");
  var ri = now.getDate().toString().padStart(2, "0");
  var shi = now.getHours().toString().padStart(2, "0");
  var fen = now.getMinutes().toString().padStart(2, "0");
  var miao = now.getSeconds().toString().padStart(2, "0");
  if (time === undefined) {
   
    return ``;
  } else {
   
    return `${
     nian}-${
     yue}-${
     ri} ${
     shi}:${
     fen}:${
     miao}`; //
  }
})

2. mixin

1. npm install moment --save（如果想使用moment）
2. 在src下创建一个mixin文件夹 里面创建一个index.js

//import moment from 'moment'

const mixin = {
   
    methods: {
   
        getTimeSFM