踏平vue3的坑

踏平vue3的坑

vue2隔了很久没有写，现在直接跳vue3发现之前不熟悉的写法又回来了。

需求

1. vue3中如何实现A页面跳转到B页面，在B页面操作了再返回到A页面，A页面填写的数据还存在。
2. 列表页面点击进入详情页面，从详情页面返回到列表，选择的位置不变

主要实现原理是通过keepalive

操作步骤：

1. 在router.js 文件中配置meta属性值

{
    path: "/add",
    name: "add",
    component: () => import("@/views/add.vue"),
    meta: {
      keepAlive:true
    },
    beforeRouteLeave: (to, from, next) => {
      console.log(to.meta);
    }
  },

2. 配置router-view中配置

    <transition name="container-right-transition" mode="out-in">
    <router-view v-slot="{ Component }">
		<keep-alive>
		  <component :is="Component" :key="$route.name" v-if="$route.meta.keepAlive" />
		</keep-alive>
		<component :is="Component" :key="$route.name" v-if="!$route.meta.keepAlive" />
	</router-view>
</transition>

注意错误示范 ,千万别把transition写在里面，写在里面效果出不来，卡了半天

 <router-view class="router-view" v-slot="{ Component }" v-if="!$route.meta.keepAlive"> 
      <transition :name="transitionName">
        <component :is="Component" />
      </transition>
    </router-view> 

3. 在跳转的新页面中配置

<script lang="ts">
import { onBeforeRouteLeave } from 'vue-router'
....
setup(props, ctx) {
    onBeforeRouteLeave((to,from,next)=>{ //页面路由消失之前
	    console.log("onBeforeRouteLeave")
	      to.meta.keepAlive = true
	      next()
	    })
    }
   const onClickLeft = () =>{ // 返回页面
      router.back();
   } ;
....
</script>

注意: 如果自己引入的keepalive失效的化可以关注一下onBeforeRouteLeave是否被触发，或者看看keepalive是否正确引入