Vue-router动画

wushuiyong 发布于2019-08-21 16:27 / 1741人阅读

摘要：在数据获取期间显示加载中之类的指示。导航完成之前获取导航完成前，在路由的钩子中获取数据，在数据获取成功后执行导航。附上两种数据获取小例

vue-router

过渡动效
组件也有动画切换效果
是基本的动态组件，所以我们可以用组件给它添加一些过渡效果：

单个路由的过渡

给每个添加特效在组件中加上中可以用那么命名
mode="out-in"//设置先出还是先进

基于路由的动态过渡

还可以基于当前路由与目标路由的变化关系，动态设置过渡效果：
用watch进行监听

watch: {
  "$route" (to, from) {
    const toDepth = to.path.split("/").length
    const fromDepth = from.path.split("/").length
    this.transitionName = toDepth < fromDepth ? "slide-right" : "slide-left"
  }
}

数据获取

导航完成之后获取

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

导航完成之前获取

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

附上两种数据获取小例

https://github.com/hxj886600/...

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/88568.html

利用vue-cli配合vue-router搭建一个完整的spa流程（一）

摘要：利用配合搭建一个完整的流程二前言所用的一些基本操作。全局安装创建一个基于的模板创建过程中，为必须，其他语法检测，单元测试等按需求安装。为入口文件，的实例在这里书写。挂载在中的标签上。定时器的作用是模拟数据请求延时。 2017/5/9 更新！GitHubpages搞了下，PC可以浏览。↓ https://15901233752.github.io... showImg(https://...

cgh1999520 2019-08-20 16:01 评论0 收藏0
路由

摘要：由命名路由与子路由构成整体结构，我们用它构建如下页面。以下两张图说明路由和子路由是如何工作的。继续修改好友信息的路由部分添加好友信息为组件添加动态路由为动态路由添加为路径参数添加数据下发为组件添加，并使用它。不使用vue-router的情况代码官方给出下面的例子在不使用vue-router的情况下来实现一个路由。该示例结合了H5历史管理API、单文件组件、JS模块相关内容来实现路由...

Aklman 2019-08-22 16:09 评论0 收藏0
Vue2.x踩坑与总结

摘要：年前就打算学习并总结一下，但是因为年前工作比较多，所以进展十分缓慢，现在终于学了一大部分，而且自己在学习开发中也踩了不少坑也总结了不少，所以将自己踩过的坑总结一下分享出来。因为在项目中使用了，所以对于也有一个踩坑总结，点击链接。年前就打算学习并总结一下vue2.x，但是因为年前工作比较多，所以进展十分缓慢，现在终于学了一大部分，而且自己在学习开发中也踩了不少坑也总结了不少，所以将自己...

bovenson 2019-08-21 11:29 评论0 收藏0
vue学习笔记（四）

摘要：提供了两种向组件传递参数的方式。子路由项路径不要使用开头，以开头的嵌套路径会被当作根路径。路由实例的方法这里学习两个路由实例的方法和。实际上，是通过不同的将这些资源加载后打包，然后输出打包后文件。一、vue-router 1、简介我们经常使用vue开发单页面应用程序（SPA）。在开发SPA过程中，路由是必不可少的部分，vue的官方推荐是vue-router。单页面应用程序看起来好像...

frank_fun 2019-08-21 17:16 评论0 收藏0
vue学习笔记（四）

摘要：提供了两种向组件传递参数的方式。子路由项路径不要使用开头，以开头的嵌套路径会被当作根路径。路由实例的方法这里学习两个路由实例的方法和。实际上，是通过不同的将这些资源加载后打包，然后输出打包后文件。一、vue-router 1、简介我们经常使用vue开发单页面应用程序（SPA）。在开发SPA过程中，路由是必不可少的部分，vue的官方推荐是vue-router。单页面应用程序看起来好像...

lwx12525 2019-08-01 17:50 评论0 收藏0