Vue 路由 过渡动效 数据获取方法

过渡动效

<router-view> 是基本的动态组件，所以我们可以用 <transition> 组件给它添加一些过渡效果：

<transition>
 <router-view></router-view>
</transition>

单个路由的过渡

上面的用法会给所有路由设置一样的过渡效果，如果你想让每个路由组件有各自的过渡效果，可以在各路由组件内使用 <transition> 并设置不同的 name。

基于路由的动态过渡

还可以基于当前路由与目标路由的变化关系，动态设置过渡效果

<!-- 使用动态的 transition name -->
<transition :name="transitionName">
 <router-view></router-view>
</transition>
// 接着在父组件内
// watch $route 决定使用哪种过渡
watch: {
 '$route' (to, from) {
  const toDepth = to.path.split('/').length
  const fromDepth = from.path.split('/').length
  this.transitionName = toDepth < fromDepth ? 'slide-right' : 'slide-left'
 }
}

数据获取

进入某个路由后，需要从服务器获取数据。例如，在渲染用户信息时，你需要从服务器获取用户的数据。我们可以通过两种方式来实现：

1.导航完成之后获取：先完成导航，然后在接下来的组件生命周期钩子中获取数据。在数据获取期间显示『加载中』之类的指示。

2.导航完成之前获取：导航完成前，在路由的 enter 钩子中获取数据，在数据获取成功后执行导航。

导航完成后获取数据

当你使用这种方式时，我们会马上导航和渲染组件，然后在组件的 created 钩子中获取数据。这让我们有机会在数据获取期间展示一个 loading 状态，还可以在不同视图间展示不同的 loading 状态。

假设我们有一个 Post 组件，需要基于 $route.params.id 获取文章数据：

在导航完成前获取数据

通过这种方式，我们在导航转入新的路由前获取数据。我们可以在接下来的组件的 beforeRouteEnter 钩子中获取数据，当数据获取成功后只调用 next 方法。

下面是地址：https://github.com/haxxk/xu_s...
https://github.com/haxxk/xu_s...

总结

以上所述是小编给大家介绍的Vue 路由 过渡动效 数据获取方法，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对我们网站的支持！

赞 (0)

相关推荐

  • 详解Vue路由钩子及应用场景（小结）

    一. 路由钩子语法 在vue-router的官方文档中, 将路由钩子翻译为导航守卫, 下面是文档中的内容摘要, 大家也可以通过传送门前往官网阅读详细内容 路由钩子 路由钩子主要是给使用者在路由发生变化时进行一些特殊的处理而定义的,靠..好拗口啊. 总体来讲vue里面提供了三大类钩子 1.全局钩子 2.某个路由独享的钩子 3.组件内钩子 三种路由钩子中都涉及到了三个参数,这里直接上官方介绍吧 to: Route: 即将要进入的目标 路由对象 from: Route: 当前导航正要离开的路由 nex

  • vue-router+vuex addRoutes实现路由动态加载及菜单动态加载

    此案例主要实现了一个功能是,在vue实例首次运行时,在加载了login和404两个路由规则,登录成功后,根据登录用户角色权限获取该角色相应菜单权限,生成新的路由规则添加进去. 做过后台管理系统都一定做过这个功能,在对菜单权限进行粗粒度权限控制的时候,通过角色获取菜单后,异步生成菜单,所以一开始拿到需求的时候,我也以为这和平常的没什么不同,不过做起来就发现了很多问题, 1.vue-router的实例,在new vue实例的时候,就加载了,且必须加载,这个时候,登录路由一定要加载,可是这个时候没有登

  • vue-router路由与页面间导航实例解析

    vue-router路由与页面间导航实例解析

    vue-router是Vue.js官方的路由插件,它和vue.js是深度集成的,适合用于构建单页面应用.vue的单页面应用是基于路由和组件的,路由用于设定访问路径,并将路径和组件映射起来.传统的页面应用,是用一些超链接来实现页面切换和跳转的.在vue-router单页面应用中,则是路径之间的切换,也就是组件的切换. vue-router 我们知道路由定义了一系列访问的地址规则,路由引擎根据这些规则匹配找到对应的处理页面,然后将请求转发给页进行处理.可以说所有的后端开发都是这样做的,而前端路由是不

  • vue路由跳转时判断用户是否登录功能的实现

    通过判断该用户是否登录过,如果没有登录则跳转到login登录路由,如果登录则正常跳转. 一丶首先在用户登录前后分别给出一个状态来标识此用户是否登录(建议用vuex): 简单用vuex表示一下,不会可以自己去官网多看看: import Vue from 'vue' import Vuex from 'vuex' Vue.use(Vuex); var state = { isLogin:0, //初始时候给一个 isLogin=0 表示用户未登录 }; const mutations = { cha

  • vue2+el-menu实现路由跳转及当前项的设置方法实例

    Vue.js 是什么 Vue.js (读音 /vjuː/,类似于 view) 是一套构建用户界面的渐进式框架.与其他重量级框架不同的是,Vue 采用自底向上增量开发的设计.Vue 的核心库只关注视图层,它不仅易于上手,还便于与第三方库或既有项目整合.另一方面,当与单文件组件和 Vue 生态系统支持的库结合使用时,Vue 也完全能够为复杂的单页应用程序提供驱动. 好了,下面通过本文给大家介绍vue2+el-menu实现路由跳转及当前项的设置方法,具体内容如下所示: <span style="

  • Vue-router路由判断页面未登录跳转到登录页面的实例

    如下所示: router.beforeEach((to, from, next) => { if (to.matched.some(record => record.meta.requireAuth)){ // 判断该路由是否需要登录权限 if (token) { // 判断当前的token是否存在 next(); } else { next({ path: '/login', query: {redirect: to.fullPath} // 将跳转的路由path作为参数,登录成功后跳转到该

  • vue.js默认路由不加载linkActiveClass问题的解决方法

    vue.js默认路由不加载linkActiveClass问题的解决方法

    发现问题 最近在打开项目的时候,发现我的默认路由没加载上linkActiveClass, 网上一搜,发现很多同学也有这个问题,查了一些资料发现这是个重定向的问题,官网文档是这么写的 https://router.vuejs.org/zh-cn/essentials/redirect-and-alias.html 重定向 重定向也是通过 routes 配置来完成,下面例子是从 /a 重定向到 /b: const router = new VueRouter({ routes: [ { path:

  • Vue 路由 过渡动效 数据获取方法

    过渡动效 <router-view> 是基本的动态组件,所以我们可以用 <transition> 组件给它添加一些过渡效果: <transition> <router-view></router-view> </transition> 单个路由的过渡 上面的用法会给所有路由设置一样的过渡效果,如果你想让每个路由组件有各自的过渡效果,可以在各路由组件内使用 <transition> 并设置不同的 name. 基于路由的动态过

  • Vue实现路由过渡动效的4种方法

    Vue实现路由过渡动效的4种方法

    Vue 路由过渡是对 Vue 程序一种快速简便的增加个性化效果的的方法. 可以让你在程序的不同页面之间增加平滑的动画和过渡.如果使用得当,可以使你的程序显得更加专业,从而增强用户体验. 本文中会先介绍使用 Vue 路由过渡的基础知识,然后在举几个例子,为你一些灵感.下面是其中的一个案例: 在 Vue 程序中添加路由 一般 Vue 路由设置如下所示: <template> <router-view /> </template> 在旧版本的 Vue 路由中,我们可以简单地用

  • vue 路由切换过渡动效滑入滑出效果的实例代码

    vue 路由切换过渡动效滑入滑出效果的实例代码

    效果展示 css 滑入和滑出的动画 .twofade-enter {transform: translateX(100%);} .twofade-enter-active {transition: all 0.3s;position: absolute;height:100%;background:#ececec;} .twofade-leave-active {transition: all 0;transition-delay: 0.3s;position: absolute;} .twof

  • vue工程全局设置ajax的等待动效的方法

    最近在做vue的项目,使用了element-ui作为ui组件库,采用vuex进行状态管理,与后台的请求交互采用axios库实现,原本做的页面,ajax请求个数也只有三个,将等待动画的显示和隐藏通过mutation去控制,但是项目越来越大,请求也越来越多,能否将这个等待动画与ajax的请求相关联呢? 实现等待动效 在element-ui中,提供了两个方法进行调用loading组件,一个是在需要遮罩的div容器中添加v-loading指令,另一种就是以服务形式调用:Loading.service(o

  • Vue 解决路由过渡动画抖动问题(实例详解)

    前言 Vue-Router 作为 Vue 的核心模块,它为我们提供了基于组件的路由配置.路由参数等功能,让单页面应用变得更易于管理.良好的路由管理尤为重要,比如路由拦截.路由懒加载.路由权限等都在开发中起着至关重要的作用.同时路由还支持视图过渡效果,没有添加过渡动画的路由切换会感觉很生硬,为了提高用户体验,路由过渡还是很有必要的.毕竟做出来,自己看着也舒服. 过渡动效文档:https://cn.vuejs.org/v2/guide/transitions.html 过渡动画抖动 代码片段 这里为

  • 详解vue几种主动刷新的方法总结

    当我们在做项目时,我们需要做当前页面的刷新来达到数据更新的目的,在此我们大概总结了几种常用的页面刷新的方法. 1.window.location.reload(),是原生JS提供的方法,this.$router.go(0):是vue路由里面的一种方法,这两种方法都可以达到页面刷新的目的,简单粗暴,但是用户体验不好,相当于按F5刷新页面,会有短暂的白屏,相当于页面的重新载入. 2.通过路由跳转的方法刷新,具体思路是点击按钮跳转一个空白页,然后再马上跳回来: 当前页面: <template> &l

  • Vue 不定高展开动效原理详解

    Vue 不定高展开动效原理详解

    目录 使用场景 背景 实现 transition 组件 过渡效果原理 解决 使用场景 在大多数 APP 中,都有问答模块,类似于下面这种(bilibili 为例): 问答模块的静态页面开发并不复杂,也没有特殊的交互.唯一有一点难度应该是回答部分的展开特效. 展开时,需要从上往下将回答部分的 div 慢慢撑开,上面的箭头也要有旋转的特效. 收回时,需要从下往上将回答部分的 div 慢慢缩小,上面的箭头也要有旋转的特效. 对于一般的展开.隐藏特效,只需要在对应元素的 height 上面增加过渡效果即

  • vue 路由页面之间实现用手指进行滑动的方法

    问题描述:vue 路由页面之间如何用手指进行滑动 解决方法: 1.下载依赖:npm intall  vue-touch --save -D 2.在需要滑动的页面添加标签;<v-touch>  注意要宽高,当页面有东西要写入时,可用v-touch 包裹着其他标签: 如:<v-touch class="controller" v-on:swipeleft="onSwipeLeft" v-on:swiperight="onSwipeRight&

  • vue嵌套路由与404重定向实现方法分析

    vue嵌套路由与404重定向实现方法分析

    本文实例讲述了vue嵌套路由与404重定向实现方法.分享给大家供大家参考,具体如下: 第一部分: vue嵌套路由 嵌套路由是什么? 嵌套路由就是在一个被路由过来的页面下可以继续使用路由,嵌套也就是路由中的路由的意思.  比如在vue中,我们如果不使用嵌套路由,那么只有一个<router-view>,但是如果使用,那么在一个组件中就还有<router-view>,这也就构成了嵌套. 为什么要使用嵌套路由? 就比如在一个页面中, 在页面的上半部分,有三个按钮,而下半部分是根据点击不同的

  • 简述vue路由打开一个新的窗口的方法

    简单说一下vue路由如何打开一个新的窗口 1.router-link标签 在vue的官方文档中 看到这大家应该会想,既然router-link不支持target="_blank"属性,那我们该怎么用router-link打开一个新的窗口呢?别急,继续往下看~ 文档中还有一处描述 router-link添加tag="li"属性后,居然可以变成li标签渲染出来,真特么神奇哈,那可不可以写成tag="a",从而去替代a标签呢?我们尝试着写一哈 <

随机推荐