vue App.vue router 过渡效果, keep-alive 结合使用示例

1, router.js配置每个路由的index值
2, router.js配置每个路由的keepAlive值

app.vue 代码

<template><div id="app"><transition :name="transition"><keep-alive><router-view v-if="$route.meta.keepAlive"></router-view></keep-alive></transition><transition :name="transition"><router-view v-if="!$route.meta.keepAlive"></router-view></transition></div>
</template>
<style>
@import url("../static/css/reset.css");
@import url("../static/css/transition.css");
</style>
<script>
export default {name: "App",data() {return {transition: ""};},watch: {$route(to, from) {if (to.meta.index > from.meta.index) {this.transition = "slide-left";} else {this.transition = "slide-right";}}},
}
</script>

transition.css代码

.slide-right-enter-active,
.slide-right-leave-active,
.slide-left-enter-active,
.slide-left-leave-active {will-change: transform;transition: all 500ms;position: absolute;width:100%;height:100%;
}
.slide-right-enter {opacity: 0;transform: translate3d(-100%, 0, 0);
}
.slide-right-leave-active {opacity: 0;transform: translate3d(100%, 0, 0);
}
.slide-left-enter {opacity: 0;transform: translate3d(100%, 0, 0);
}
.slide-left-leave-active {opacity: 0;transform: translate3d(-100%, 0, 0);
}

转载于:https://www.cnblogs.com/xielisen/p/9492206.html

vue App.vue router 过渡效果, keep-alive 结合使用示例相关推荐

vue 入口main.js 调用app.vue 入口页面以及触发第三方登陆校验
main.js 代码: // The Vue build version to load with the `import` command // (runtime-only or standalon ...
vue3 webpack5 安装时报错 App.vue:2 Uncaught TypeError: (0 , vue__WEBPACK_IMPORTED_MODULE_0__.createEleme
在 webpack 配置vue3 element plus 的时候报错你可能安装了局部的 vue 或者 vue-loader 的版本低于16 解决方案 npm i vue-loader@next ...
vue $route及$router的区分
参考网站 https://www.cnblogs.com/czy960731/p/9288830.html https://blog.csdn.net/qxb5215/article/details/ ...
vue项目中app.vue 、main.js和 index.html的关联
1.main.js是我们的入口文件,主要作用是初始化vue实例并使用需要的插件. import Vue from 'vue' import App from './App'/* eslint-disa ...
vue项目没有router文件夹_vueRouter没有报错，但是页面渲染空白
我的inde遇新是直朋能到分览支体调x.js代码 import Vue from 'vue'; import App from './App.vue'; import VueRouter from ' ...
vue调用顺序(初学版) index.html → main.js → app.vue → index.js → components/组件测试
关于它是怎么调用运作的:https://mp.csdn.net/postedit/86134414 一. 准备工作: 1.下载webstorm,安装vue. 2.创建项目,cd到要放项目的文件夹下 v ...
[转]vue项目中，main.js,App.vue,index.html如何调用
1.main.js是我们的入口文件,主要作用是初始化vue实例,并引入所需要的插件 2.App.vue是我们的主组件,所有页面都是在App.vue下进行切换的.其实你也可以理解为所有的路由也是App. ...
总结Vue中index.html、main.js、App.vue、index.js之间关系以及Vue项目加载流程
总结Vue中index.html.main.js.App.vue.index.js之间关系以及Vue项目加载流程文章目录总结Vue中index.html.main.js.App.vue.index ...
vue项目没有router文件夹_Vue路由(vue-router)配置实战——动态路由，重定向，工程非根目录...
1. 前言 (1) 资料 (2) 需求本文是在上篇<使用vue-i18n实现多语言>功能的引申.需要实现的功能如下: 多语言需要反映在url上,英文.简体中文.繁体中文页面需分别为/en ...

vue App.vue router 过渡效果, keep-alive 结合使用示例

vue App.vue router 过渡效果, keep-alive 结合使用示例相关推荐

最新文章

热门文章