import Vue from 'vue'
import Router from 'vue-router'
Vue.use(Router)
//如果使用模块化机制编程，导入Vue和VueRouter，就需要调用Vue.use(Router)

import Login from '@/components/login' 
import Index from '@/components/index' 
import PointList from '@/components/pointList/pointList' 
import SettLement from '@/components/pointList/settlement' 

//创建router实例，然后传入‘routes'配置
export default new Router({
 //routes配置可以直接传入，也可以先定义后使用
 //每个路由都应该映射一个组件，其中component可以是通过Vue.extend()创建的组件构造器，
 或者只是一个组件配饰对象。(今天暂时不考虑嵌套路由的情况)
 routes: [
 {
 path: '/', // 登录
 name: 'Login',
 component: Login
 },
 {
 path: '/index', // 主页
 name: 'Index',
 component: Index
 },
 {
 path: '/pointList', // 点单
 name: 'PointList',
 component: PointList
 },
 {
 path: '/settLement', // 结算
 name: 'SettLement',
 component: SettLement
 }
]
})

// 字符串
router.push('home')
// 对象
router.push({ path: 'home' })
// 命名的路由
router.push({ name: 'user', params: { userId: 123 }})
// 带查询参数，变成 /register"htmlcode">

<router-link :to="{name:'PointList', params: { userId: 123 }}">
 <i class="icon"><img src="/UploadFiles/2021-04-02/point.png">

2.


<footer class="version" @click="goPage('Author')">v 1.0</footer>
//Js：
methods: {
 goPage(url, param) {
 this.$router.push({ name: url });
 }
}


三、vue路由对象$route(只读)


在使用了vue-router的应用中，路由对象会被注入每个组件中，赋值为this.$route,并且当路由切换时，路由对象会被更新。所以route相当于当前正在跳转的路由对象，可以从里面获取name,path,params,query等，即包含了当前URL解析得到的信息，还有URL匹配到的路由记录。


路由对象暴露了以下属性(常见)：
1、$route.path

字符串(string)。等于当前路由对象的路径，会被解析为绝对路径，

如:http://example.com/#/login"htmlcode">

<router-link :to="{name:'Order', params: { userId: 123 }}">
</router-link>


用在调用router.push()中也是一回事：




this.$router.push({ name: 'Order', params: { userId: 123 }})


3、$route.params


对象(object)。路由跳转携带参数：


this.$router.push({ name: 'Order', params: { userId: 123 }})
console.log(this.$route.params.userId); //123


4、$route.query


对象(object)。可访问携带的查询参数：


this.$router.push({name: 'login', query:{name: 'userName'}});
this.$route.query.name; //you
//此时路由为:http://example.com/#/login"color: #ff0000">




watch：{‘$route' (to, from) {}}


route 的变化。watch中监听的对象默认回调函数中的参数值就是newVal,oldVal。作为 $route 属性来说当然也就是 to 和 from 的概念了。


Vue用router.push(传参)跳转页面，参数改变，在跳转后的路由观察路由变化，进行页面刷新，可对“from->to”的过程设置动画效果。


该功能的难点就在于怎样获取“上一页”和“下一页”,即怎样分辨是“前进”还是“后退”？


例：




// watch $route 决定使用哪种过渡
watch:{
 '$route' (to, from) {
 //此时假设从index页面跳转到pointList页面
 console.log(to); // "/pointList"
 console.log(from); // “/index”
 const routeDeep = ['/', '/index','/pointList', '/settLement'];
 const toDepth = routeDeep.indexOf(to.path)
 const fromDepth = routeDeep.indexOf(from.path)
 this.transitionName = toDepth > fromDepth "htmlcode">

<transition :name="transitionName">
 <router-view class="view app-view"></router-view>
</transition>



  
transition中有name属性用于替换vue钩子函数中的类名。
  
transition中只能有一个子元素并且该子元素需要有v-show或者v-if来控制是否显示。

过渡CSS类名


transition中的name属性用于 替换 vue钩子函数中的类名transitionName-

  
transitionName-enter: 定义进入过渡的开始状态。在元素被插入时生效，在下一个帧移除。
  
transitionName-enter-active: 定义进入过渡的结束状态。在元素被插入时生效，在transition/animation完成之后移除。
  
transitionName-leave:定义离开过渡的开始状态。在离开过渡被触发时生效，在下一个帧移除。
  
transitionName-leave-active: 定义离开过渡的结束状态。在离开过渡被触发时生效，在transition/animation完成之后移除。



this.transitionName = toDepth > fromDepth "htmlcode">

.fold-left-enter-active {
 animation-name: fold-left-in;
 animation-duration: .3s;
 }
 .fold-left-leave-active {
 animation-name: fold-left-out;
 animation-duration: .3s;
 }
.fold-right-enter-active {
 animation-name: fold-right-in;
 animation-duration: .3s;
 }
 .fold-right-leave-active {
 animation-name: fold-right-out;
 animation-duration: .3s;
 }


animation 属性是一个简写属性，用于设置六个动画属性：



  
    
      值
      描述
    
  
  
    
      animation-name
      规定需要绑定到选择器的 keyframe 名称。
    
    
      animation-duration
      规定完成动画所花费的时间，以秒或毫秒计。
    
    
      animation-timing-function
      规定动画的速度曲线。
    
    
      animation-delay
      规定在动画开始之前的延迟。
    
    
      animation-iteration-count
      规定动画应该播放的次数。
    
    
      animation-direction
      规定是否应该轮流反向播放动画。
    
  







@keyframes fold-left-in {
 0% {
  transform: translate3d(100%, 0, 0);
 }
 100% {
  transform: translate3d(0, 0, 0);
 }
 }
 @keyframes fold-left-out {
 0% {
  transform: translate3d(0, 0, 0);
 }
 100% {
  transform: translate3d(-100%, 0, 0);
 }
 }


根据CSS3 @keyframes规则，创建动画。创建动画的原理即将一套CSS样式逐渐变化为另一套样式。在动画过程中，能够多次改变这套CSS样式。可以“百分比”来规定改变发生的时间，或者通过关键词“from”和“to”，等价于“0%”(动画的开始时间)和“100%”(动画的结束时间)。一般为了获得最佳的浏览器支持，应该始终定义0%和100%选择器。


transform属性向元素应用2D或3D转换。该属性允许我们对元素进行旋转、缩放、移动或倾斜。translate3d(x,y,z)定义3D转换，如transform：translate3d(100%, 0, 0)只改变了x的值，即代表横向左滑动，同理可相应推出其他情况。


总结


以上就是vue页面跳转动画效果功能实现的6个步骤，即这个功能中所含括的6个大知识点，当然其中还包括许多扩展的知识点，学无止境，需慢慢深入挖掘…
总结
以上就是这篇文章的全部内容了，希望本文的内容对大家的学习或者工作具有一定的参考学习价值，如果有疑问大家可以留言交流，谢谢大家对的支持。

                                
                                

                                    vue页面跳转方式,vue多页面路由跳转,vue实现页面跳转 
                                
DDR爱好者之家 Design By 杰米
                            
                        
                        

                            

                                广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）

                                免责声明：本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除！
                            
                        
                        

                            

                                
                                    上一篇
                                    
vue 音乐App QQ音乐搜索列表最新接口跨域设置方法
                                
                            
                            

                                
                                    下一篇
                                    
vue解决弹出蒙层滑动穿透问题的方法
                                
                            
                        
                        
                        
DDR爱好者之家 Design By 杰米
                        

                            

                                
                                
                                    评论“Vue页面跳转动画效果的实现方法”
                                
                            
                            

                                

                                    

                                        

                                            

                                                

                                                    
                                                
                                                

                                                    
                                                
                                                

                                                    

                                                    

                                                    

                                                
                                                

                                                     再想想
                                                    
                                                    
                                                    
                                                    
                                                    
                                                
                                            
                                            

                                        
                                    
                                    

                                    

                                        
暂无评论...