vue实现跳转接口push 转场动画示例

2024-10-28 16:57:40

1.index.js 配置子路由children。

import Vue from 'vue'
import Router from 'vue-router'
import SingerDetail from 'components/singer-detail/singer-detail'

Vue.use(Router)

export default new Router({
 routes: [
 {
  path: '/',
  redirect: '/recommend'
 },
 {
  path: '/singer',
  component: Singer,
  //配置子路由,加一个参数children
  children: [
  {
   //:id 以id为变量,传递一个参数,跳转到不同子路由
   path: ':id',
   component: SingerDetail
  }
  ]
 },
 {
  path: '/search',
  component: Search,
  children: [
  {
   path: ':id',
   component: SingerDetail
  }
  ]
 }
 ]
})

1.Singer

<template>
 <div class='singer'>
 <list-view @select='selectSinger'></list-view>
 //需要用routeview承载子路由
 <router-view></router-view>
 </div>
</template>

<script>
 import listView from '../components/listview'
 export default{
  methods:{
  selectSinger(singer){
   //vue编程式跳转接口push
   this.$router.push({
    path:'/singer/'+singer.id
   })
  }
  },

  components:{
   listView
  }
}

</script>

<style>
 .singer{

  }
</style>

2.listview (singer子组件)

<template>
 <div class='listview'>
 <ul>
  <li @click='selectItem(item)'></li>
 </ul>
 </div>
</template>

<script>
 export default{
 methods:{
  //内部把点击事件派发出去,告诉外部我被点击
  selectItem(item){
   this.$emit('select',item);
  }
 }
}

</script>

<style>
 .listview{

  }
</style>

3.singerDetail

<template>
 <transition name='slide'>
 <div class='singer-detail'></div>
 </transition>

</template>

<script>
</script>

<style>
 .singer-detail{
  position:fixed
  z-index:100
  top:0
  left:0
  right:0
  bottom:0
  background:lightgray
  }
  .slider-enter-active,.slider-leave-active{
  transition： all 0.3s
  }
  .slider-enter,.slider-leave-to{
   transform: translate3d(100%,0,0)
  }
</style>

4.push转场动画

<transition name="slide">
  <div class="chatdiv">
   <div class="back" @click="backAction"></div>
   <div class="cont">免费咨询专业医生在线解答</div>
  </div>
</transition>

<style>
.slide-enter-active,.slide-leave-active{
  transition: all 0.3s;
 }

 .slide-enter,.slide-leave-to{
  transform: translate3d(100%,0,0);
 }
</style>

以上这篇vue实现跳转接口push 转场动画示例就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持我们。

使用vue-router切换页面时实现设置过渡动画

背景今天在编写页面时,看到页面没有任何效果就只是直入直出,完全没有一点逼格,所以想要实现类似于原生app的那种切换页面时的特效,遂开始google,发现网上各种方案都是各有优缺点,于是整理了自认为优雅的方案并记录下来. 实现难点如何判断切换路由时是前进还是后退每次切换时向左向右切换动画如何实现解决方案我们需要给各个页面定义层级,在切换路由时判断用户是进入哪一层页面,如果用户进入更高层级那么做前进动画,如果用户退到低层级那么做后退动画. router/index.js import Vu
vue中组件的过渡动画及实现代码

1. 和多个元素的过渡一样,用组件来替换transition中包裹的标签 <style> .fade-enter, .fade-leave-to { opacity: 0 } .fade-enter-active, .fade-leave-active { transition: opacity 2s } </style> </head> <body> <div id="demo"> <button @click=&q
VUE单页面切换动画代码(全网最好的切换效果)

我就废话不多说了,直接上代码吧! // 视图切换动画逻辑 let history = window.sessionStorage let historyCount = history.getItem('count') * 1 || 0 function routerTransition (to, from) { const toIndex = history.getItem(to.name) const fromIndex = history.getItem(from.name) let dir
vue router自动判断左右翻页转场动画效果

前段时间做了一个移动端spa项目,技术基于 :vue + vue-router + vuex + mint-ui 因为使用了vue-cli脚手架的webpack模版,所有页面都以.vue为后缀的文件作为一个组件最近公司项目比较少终于有空来记录一下自己对vue-router的一些小小的使用心得, 一般的移动端口单页应用在跳转页面时候会有相应的转场动画,比如: 1. 从当前一级页面跳转二级页面需要展示的转场动画是一级页面向屏幕左边移动消失的同时, 二级页面从屏幕的右边向左边移动出现.(类似翻书翻到
vue-router之实现导航切换过渡动画效果

过渡动效提供了transition的封装组件,添加过渡动画,通过添加或删除css类名来实现. 过渡的css类名: v-enter 进入过渡的开始状态 v-enter-active 进入活动状态 v-enter-to 进入的结束状态 v-leave 离开过渡的开始状态 v-leave-active 离开活动状态 v-leave-to 离开结束状态过渡模式: in-out 先进后出 out-in 先出后进用法: 做一个淡隐淡出效果把想要运动的元素放到<transition></tra
Vue页面跳转动画效果的实现方法

前言现如今移动端APP对用户体验方面的要求越来越高了,最近致力于用户体验优化,因为需要实现类似APP页面切换的动画效果,百度google搜索资料不是很全,所以自己写文档,在实现效果的基础上,顺便恶补一波VueRouter及CSS过渡动画的知识点,欢迎有兴趣的朋友多多指教. vue-router是Vue.js官方的路由插件,它和vue.js是深度集成的,适合用于构建单页面应用.vue的单页面应用是基于路由和组件的,路由用于设定访问路径,并将路径和组件映射起来.传统的页面应用,是用一些超链接来实现
vue实现跳转接口push 转场动画示例

1.index.js 配置子路由children. import Vue from 'vue' import Router from 'vue-router' import SingerDetail from 'components/singer-detail/singer-detail' Vue.use(Router) export default new Router({ routes: [ { path: '/', redirect: '/recommend' }, { path: '/s
vue router 跳转时打开新页面的示例方法

记录一下在vue项目中如何实现跳转到一个新页面(一个比较简单又比较基础的问题了),有两个方法: 1.<vue-link>标签实现新窗口打开官方文档中说 v-link 指令被 <router-link> 组件指令替代,且 <router-link> 不支持 target="_blank" 属性,如果需要打开一个新窗口必须要用 <a> 标签,但事实上vue2版本的 <router-link> 是支持 target="_
iOS Swift控制器转场动画示例代码

前言在IOS开发中,我们model另外一个控制器的时候,一般都使用默认的转场动画.本文将给大家详细介绍关于iOS Swift控制器转场动画的相关内容,分享出来供大家参考学习,下面话不多说了,来一起看看详细的介绍吧. 返回效果也可更改四种转场动画 1. move:源图片位置移动到目标图片位置: 2. circle:根据源控件大小创建圆形或者椭圆形path路径,放大展示目标: 3. tier:源左右,目标由小到大缩放: 4. middle:源的中心点开始放大,返回是缩回到中心. 代码解析给UI
IOS登录页面动画、转场动画开发详解

动画效果需求分析分析方法下载这个gif动图,用mac默认的打开方式打开这个gif图(双击图片即可),效果如下鼠标选中红色箭头所指的位置,然后按住键盘方向键下键,图片会以缓慢的可控的速度播放,便于分析动画的构成. 小tips:macos系统想正常浏览一个gif动图,可以鼠标单击图片后按空格,也可以选择用浏览器打开,gif图会以正常速度播放. 技术点分析如何生成一个动画让控件执行? 现流行的方式主要有三种: 1.基本动画 2.核心动画 3.三方框架--POP框架(由Facebook开发)
Vue路由跳转方式区别汇总（push，replace，go）

目录声明式导航router-link 1. 不带参数 2.带参数编程式导航 1.this.$router.push 2.this.$router.replace 3.this.$router.go(n) 总结区别: 在浏览器中,点击链接实现导航的方式,叫做声明式导航.例如:普通网页中点击 a标签链接.vue项目中点击router-link标签链接都属于声明式导航.在浏览器中,调用API方法实现导航的方式,叫做编程式导航.例如:普通网页中调用location.href跳转到新页面的方式,属于编
Vue实现Tab标签路由效果并用Animate.css做转场动画效果的代码第1/3页

类似于浏览器窗口一样的路由切换逻辑,看着还是挺高大上的,本以为有很多高级的玩意儿,奈何复杂的东西总是由简单的东西拼接而成的,这个功能也不例外. 本篇文章主要描述两个问题: 如何实现这种Tab标签页的路由效果如何为路由切换添加转场动画. 该功能的开发主要使用到 AntDesignVue 组件库的Tab组件和 Animate.css 效果如下: Tab标签页实现首先是该组件的模板部分, ContextMenu 组件是我们自定义的右键菜单,后面会说到. a-tabs 组件则是 ant 的组件,具体
vue axios封装httpjs,接口公用配置拦截操作

做一下记录,在vue项目中配置公用的请求https, (1) 位置,在src中新建 src/utils/http.js import axios from 'axios' // 引用axios import { MessageBox, Message } from 'element-ui' import Qs from 'qs' //引入数据格式化 import router from '@/router' // axios 配置 axios.defaults.timeout = 50000 /
vue路由跳转打开新窗口(window.open())和关闭窗口(window.close())

目录 vue路由跳转打开新窗口和关闭窗口编程式导航 window.open( )方法关闭窗口 window.close() vue路由跳转打开新窗口(被浏览器拦截) 第一种方法第二种方法第二种方法(改良版) 总结 vue路由跳转打开新窗口和关闭窗口需求:从当前页面跳转到其他页面时,打开一个新窗口比如:点击页面上的用户反馈,打开用户反馈的新页面,要使用编程式导航编程式导航使用路由对象的resolve的方法解析路由,可以得到location.router.href等目标路由的信息,只
vue路由跳转传参数的方法

vue中路由跳转传参数有多种,自己常用的是下面的几种通过router-link进行跳转通过编程导航进行路由跳转 1. router-link <router-link :to="{ path: 'yourPath', params: { name: 'name', dataObj: data }, query: { name: 'name', dataObj: data } }"> </router-link> 1. path -> 是要跳转的路由路径

vue实现跳转接口push 转场动画示例

相关推荐

随机推荐