页面优化

比如 作者 -> 文章 -> 文章详情 页面展示

使用vuex 全局响应式管理

columns 作者 posts 文章 post 文章详情

state: {
	  columns: {
		  currentPage: 0,
		  data: null,
	  },
	  posts: {
	  	currentPage: 0,
	  	data: null,
		currentId: '',
	  },
	  post: null
  }

columns 里面数据 储存成Object， 为了方便文章的删除和添加

使用keep-alive 完成缓存

问题一：页面不更新内容

在激活生命周期，更新网络数据

let id: string = ''
	onActivated(() => {
		const qid = useRoute().query.id
		if (qid != id) {
			id = qid
			store.dispatch('fetchPost', qid)
		}
	})

props 属性和 路由参数 更新

使用ref 包裹，在激活生命周期 赋值

headerInfo = ref(column) headerInfo.value = column

问题二: 页面切换，位置没有缓存

1.在根组件，定义一个Object数据，路由名 ： 页面滚动距离。 定义2个方法，

路由push 调用方法，设置页面滚动距离为0

const pushRouteScrollTop = ({name, space}) => {
		routerSroll[name] = space
	}

路由离开方法，设置页面滚动距离

const leaveRouteScrollTop = (name: string) => {
		routerSroll[name] = main.scrollTop
	}

在全局路由前置钩子回调中进行页面滚动

router.beforeEach((to, from) => {
		if (routerSroll[to.name] != undefined) {
			main.scrollTop = routerSroll[to.name]
		}
	})

2.定义自定义的hook， 打开页面滚动距离为0， 离开页面，保留滚动距离

手动触发 pushRoute 自动检测路由离开 onBeforeRouteLeave

import {onBeforeRouteLeave} from 'vue-router'
import mitt from './mitt'

export const leaveRoute = () => {
	onBeforeRouteLeave((to, from) => {
		if (from.query.st == '0') {
			delete from.query.st
		}
		mitt.emit('leaveRouteScrollTop', from.name)
	})
}

export const pushRoute = (name: string, space: number = 0) => {
	mitt.emit('pushRouteScrollTop', {
		name,
		space
	})
}

3.使用hook

import { pushRoute, leaveRoute } from '../hooks/useLeaveRoute'
leaveRoute()
pushRoute('post')

长列表使用虚拟列表

遇到无法解决页面逻辑问题，代码没问题

1.查看后台表

2.积极和(通过市场人员)用户沟通，软件技术回访,问操作流程