随着vue3.0的发布,vue-router发布了4.0版本,文档很明了,提供了vue2路由到vue3的变化和写法指导。 vue2: //transition<transition name="van-fade"> <router-view /> </transition>//keep-alive<keep-alive> <router-view v-if="this.$route.meat.keepAlive"></router-view> </keep-alive> <keep-alive ...
vue-router.mjs:35 [Vue Router warn]: <router-view> can no longer be used directly inside <transition> or <keep-alive>. Use slot props instead: <router-viewv-slot="{ Component }"> <keep-alive> <component :is="Component" /> </keep-alive> </router-view> v-slot这种用法在tsx里应该...
<template><router-view v-slot="{Component}"><transition name"view"mode"out-in"<keep-alive:include="keepAliveComponentNames"><component:is="Component":key="$route.fullPath"/></keep-alive></transition></router-view></template>exportdefault{setup(){return{// 需要缓存的组件名keepAliveComponent...
vue-router.mjs:35 [Vue Router warn]: <router-view> can no longer be used directly inside <transition> or <keep-alive>. Use slot props instead: <router-view v-slot="{ Component }"> <keep-alive> <component :is="Component" /> </keep-alive> </router-view> v-slot这种用法在tsx里应该...
vue-router.mjs:35 [Vue Router warn]: <router-view> can no longer be used directly inside <transition> or <keep-alive>. Use slot props instead: <router-view v-slot="{ Component }"> <keep-alive> <component :is="Component" />
当然,也可以使用meta 来控制是否 keep-alive。不然过建议用上面的方式实现。 App home 页面 页面路由tsx代码如下: import { defineComponent, KeepAlive, Transition, Suspense, computed } from 'vue'; import { useRoute, RouterView } from 'vue-router'; ...
<transition :name="name" mode="out-in" name="fade"> <keep-alive> <router-view v-if="this.$route.meta.keepAlive"></router-view> </keep-alive> </transition> <transition :name="name" mode="out-in" name="fade"> <router-view v-if="!this.$route.meta.keepAlive"></router-view> ...
-- 过渡效果 --><transition:name="state.transitionName"><!-- 缓存组件 --><keep-alive><component:is='Component':key="$route.name"v-if="$route.meta.keepAlive"/></keep-alive></transition></router-view><!-- 渲染路由视图 --><router-viewv-slot="{ Component }"><!-- 过渡效果 -->...
例子如下:name为playView的界面,router.push()新界面时,它不会被unmount掉;从新界面history.back()也不会重新渲染,不会执行setup() <router-viewv-slot="{ Component }"><transition><keep-aliveinclude="playView"><component:is="Component"/></keep-alive></transition></router-view> ...
<component :is="Component" v-if="!route.meta.keepalive && refreshPage" :key="route.path" /> </transition> </router-view> //allCacheMenu:需要缓存的组件数组['device',...] 这边必须要写key,不然会报错,被缓存的组件,每次key需要不一样,所以加了个随机数allCacheMenu.indexOf(route.path) 如...