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 相关文章推荐
在IE下获取object(ActiveX)的Param的代码
Sep 15 Javascript
javascript算法学习(直接插入排序)
Apr 12 Javascript
客户端js判断文件类型和文件大小即限制上传大小
Nov 20 Javascript
JavaScript检查弹出窗口是否被阻拦的方法技巧
Mar 13 Javascript
JavaScript实现的字符串replaceAll函数代码分享
Apr 02 Javascript
通用无限极下拉菜单的实现代码
May 31 Javascript
JavaScript随机打乱数组顺序之随机洗牌算法
Aug 02 Javascript
jQuery解析返回的xml和json方法详解
Jan 05 Javascript
JS实现可视化文件上传
Sep 08 Javascript
VeeValidate 的使用场景以及配置详解
Jan 11 Javascript
vue路由中前进后退的一些事儿
May 18 Javascript
详解Java中String JSONObject JSONArray List转换
Nov 13 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 Zip压缩 在线对文件进行压缩的函数
2010/05/26 PHP
Zend Framework入门知识点小结
2016/03/19 PHP
利用PHPExcel读取Excel的数据和导出数据到Excel
2017/05/12 PHP
PHP二维数组实现去除重复项的方法【保留各个键值】
2017/12/21 PHP
在Ubuntu 18.04上安装PHP 7.3 7.2和7.0的方法
2019/04/09 PHP
laravel框架模型、视图与控制器简单操作示例
2019/10/10 PHP
JavaScript入门教程(9) Document文档对象
2009/01/31 Javascript
js 图片缩放(按比例)控制代码
2009/05/27 Javascript
jQuery ready函数滥用分析
2011/02/16 Javascript
jquery div 居中技巧应用介绍
2012/11/24 Javascript
客户端js性能优化小技巧整理
2013/11/05 Javascript
使用Node.js实现HTTP 206内容分片的教程
2015/06/23 Javascript
详解JavaScript的内置对象
2016/12/07 Javascript
微信小程序loading组件显示载入动画用法示例【附源码下载】
2017/12/09 Javascript
vue.js添加一些触摸事件以及安装fastclick的实例
2018/08/28 Javascript
Vue 监听列表item渲染事件方法
2018/09/06 Javascript
Vue表单之v-model绑定下拉列表功能
2019/05/14 Javascript
JS中的算法与数据结构之队列(Queue)实例详解
2019/08/20 Javascript
小程序实现上传视频功能
2020/08/18 Javascript
vue-router 控制路由权限的实现
2020/09/24 Javascript
Openlayers实现地图全屏显示
2020/09/28 Javascript
[57:31]DOTA2-DPC中国联赛 正赛 SAG vs CDEC BO3 第一场 2月1日
2021/03/11 DOTA
跟老齐学Python之??碌某?? target=
2014/09/12 Python
matplotlib.pyplot画图 图片的二进制流的获取方法
2018/05/24 Python
python根据完整路径获得盘名/路径名/文件名/文件扩展名的方法
2020/04/22 Python
python如何使用腾讯云发送短信
2020/09/17 Python
香港优质食材和美酒专门店:FoodWise
2017/09/01 全球购物
英文自我鉴定
2013/12/10 职场文书
旷课检讨书1000字
2014/02/14 职场文书
培训专员岗位职责
2014/02/26 职场文书
2014国庆节商场促销活动策划方案
2014/09/16 职场文书
2014个人年度工作总结
2014/12/15 职场文书
家装业务员岗位职责
2015/04/03 职场文书
Python基础之数据类型知识汇总
2021/05/18 Python
Jupyter notebook 不自动弹出网页的解决方案
2021/05/21 Python
python调用ffmpeg命令行工具便捷操作视频示例实现过程
2021/11/01 Python