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


Posted in Javascript onNovember 01, 2019

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 转场动画示例就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JavaScript对象学习经验整理
Oct 12 Javascript
js 绑定键盘鼠标事件示例代码
Feb 12 Javascript
javascript 实现子父窗体互相传值的简单实例
Feb 17 Javascript
JavaScript输出当前时间Unix时间戳的方法
Apr 06 Javascript
基于JS实现发送短信验证码后的倒计时功能(无视页面刷新,页面关闭不进行倒计时功能)
Sep 02 Javascript
javascript实现图片左右滚动效果【可自动滚动,有左右按钮】
Sep 19 Javascript
easyui datagrid 大数据加载效率慢,优化解决方法(推荐)
Nov 09 Javascript
Bootstrap实现带暂停功能的轮播组件(推荐)
Nov 25 Javascript
微信JSSDK调用微信扫一扫功能的方法
Jul 25 Javascript
vue vant Area组件使用详解
Dec 09 Javascript
Node.js API详解之 repl模块用法实例分析
May 25 Javascript
js实现表格单列按字母排序
Aug 12 Javascript
JS实现动态星空背景效果
Nov 01 #Javascript
jQuery高级编程之js对象、json与ajax用法实例分析
Nov 01 #jQuery
vue 中固定导航栏的实例代码
Nov 01 #Javascript
vue中beforeRouteLeave实现页面回退不刷新的示例代码
Nov 01 #Javascript
vue自定义switch开关组件,实现样式可自行更改
Nov 01 #Javascript
Vue实现导航栏的显示开关控制
Nov 01 #Javascript
详解Vue后台管理系统开发日常总结(组件PageHeader)
Nov 01 #Javascript
You might like
php中smarty实现多模版网站的方法
2015/06/11 PHP
PHP中call_user_func_array回调函数的用法示例
2016/11/26 PHP
php Session无效分析资料整理
2016/11/29 PHP
php unicode编码和字符串互转的方法
2020/08/12 PHP
PHP使用两个栈实现队列功能的方法
2018/01/15 PHP
js 实现 input type=&quot;file&quot; 文件上传示例代码
2013/08/07 Javascript
jquery定时滑出可最小化的底部提示层特效代码
2013/10/02 Javascript
IE6下拉框图层问题探讨及解决
2014/01/03 Javascript
Jquery Ajax方法传值到action的方法
2014/05/11 Javascript
js实现键盘Enter键提交表单的方法
2015/05/27 Javascript
jquery实现图片水平滚动效果代码分享
2015/08/26 Javascript
快速学习jQuery插件 Form表单插件使用方法
2015/12/01 Javascript
利用select实现年月日三级联动的日期选择效果【推荐】
2016/12/13 Javascript
Angularjs根据json文件动态生成路由状态的实现方法
2017/04/17 Javascript
vue动态路由实现多级嵌套面包屑的思路与方法
2017/08/16 Javascript
用JavaScript做简易的购物车的代码示例
2017/10/20 Javascript
react-redux中connect的装饰器用法@connect详解
2018/01/13 Javascript
Angular4 Select选择改变事件的方法
2018/10/09 Javascript
JavaScript查看代码运行效率console.time()与console.timeEnd()用法
2019/01/18 Javascript
koa2服务端使用jwt进行鉴权及路由权限分发的流程分析
2019/07/22 Javascript
vue实现一个6个输入框的验证码输入组件功能的实例代码
2020/06/29 Javascript
vue中element 的upload组件发送请求给后端操作
2020/09/07 Javascript
react antd表格中渲染一张或多张图片的实例
2020/10/28 Javascript
[01:04:14]OG vs Winstrike 2018国际邀请赛小组赛BO2 第二场 8.19
2018/08/21 DOTA
[01:22:28]DOTA2-DPC中国联赛 正赛 SAG vs RNG BO3 第一场 1月18日
2021/03/11 DOTA
Python模拟随机游走图形效果示例
2018/02/06 Python
Python根据文件名批量转移图片的方法
2018/10/21 Python
如何用Python 实现全连接神经网络(Multi-layer Perceptron)
2020/10/15 Python
pycharm 复制代码出现空格的解决方式
2021/01/15 Python
css3实现二维码扫描特效的示例
2020/10/29 HTML / CSS
周年庆典邀请函范文
2014/01/23 职场文书
2014统计局民主生活会对照检查材料思想汇报
2014/10/02 职场文书
2014年财务人员工作总结
2014/11/11 职场文书
被告代理词范文
2015/05/25 职场文书
董事长致辞
2015/07/29 职场文书
MYSQL常用函数介绍
2022/05/05 MySQL