Vue 路由知识三(过渡动画及路由钩子函数)
路由的过渡动画:让路由有过渡动画,需要在<router-view>标签的外部添加<transition>标签,标签还需要一个name属性。
<transition name="fade">
<router-view ></router-view>
</transition>
css过渡类名:
组件过渡过程中,会有四个CSS类名进行切换,这四个类名与transition的name属性有关,比如name=”fade”,会有如下四个CSS类名:
fade-enter:进入过渡的开始状态,元素被插入时生效,只应用一帧后立刻删除。
fade-enter-active:进入过渡的结束状态,元素被插入时就生效,在过渡过程完成后移除。
fade-leave:离开过渡的开始状态,元素被删除时触发,只应用一帧后立刻删除。
fade-leave-active:离开过渡的结束状态,元素被删除时生效,离开过渡完成后被删除。
从上面四个类名可以看出,fade-enter-active和fade-leave-active在整个进入或离开过程中都有效,所以CSS的transition属性在这两个类下进行设置。
.fade-enter {
opacity:0;
}
.fade-leave{
opacity:1;
}
.fade-enter-active{
transition:opacity .5s;
}
.fade-leave-active{
opacity:0;
transition:opacity .5s;
}
过渡模式mode:
in-out:新元素先进入过渡,完成之后当前元素过渡离开。
out-in:当前元素先进行过渡离开,离开完成后新元素过渡进入。
mode的两个值
histroy:当你使用 history 模式时,URL 就像正常的 url,例如 http://cainiao.com/list/。
hash:默认’hash’值,但是hash看起来就像无意义的字符排列,不太好看也不符合我们一般的网址浏览习惯。
404页面的设置:
用户会经常输错页面,当用户输错页面时,我们希望给他一个友好的提示,为此美工都会设计一个漂亮的页面,这个页面就是我们常说的404页面。vue-router也为我们提供了这样的机制.
设置我们的路由配置文件(/src/router/index.js):
{
path:'*',
component:Error
}
这里的path:’*’就是找不到页面时的配置,component是我们新建的一个Error.vue的文件。
2.新建404页面:
在/src/components/文件夹下新建一个Error.vue的文件。简单输入一些有关错误页面的内容。
<template>
<div>
<h2>{{ msg }}</h2>
</div>
</template>
<script>
export default {
data () {
return {
msg: 'Error:404'
}
}
}
</script>
<router-link to="sss">我是乱写的路径</router-link> |
{
path:'/params/:newsId(\\d+)/:newsTitle',
component:Params,
beforeEnter:(to,from,next)=>{
console.log('我进入了params模板');
console.log(to);
console.log(from);
next();//一定要写!!
},
三个参数:
1、to:路由将要跳转的路径信息,信息是包含在对像里边的。
2、from:路径跳转前的路径信息,也是一个对象的形式。
3、next:路由的控制参数,常用的有next(true)和next(false)。
(模板中的钩子函数)
beforeRouteEnter:在路由进入前的钩子函数。
beforeRouteLeave:在路由离开前的钩子函数。
<script>
export default {
name: 'params',
data () {
return {
msg: 'vue-router'
}
},
beforeRouteEnter:(to,from,next)=>{
console.log("准备进入路由模板");
next();
},
beforeRouteLeave: (to, from, next) => {
console.log("准备离开路由模板");
next();
}
}
</script>
路由编程式导航:(在业务逻辑代码中需要跳转页面)
this.$router.go(-1) 和 this.$router.go(1) 前进和后退
this.$router.push('/目标地址')
这个编程式导航的作用就是跳转。
Vue 路由知识三(过渡动画及路由钩子函数)的更多相关文章
- vue路由导航守卫及前置后置钩子函数参数详解
首先构建一个测试demo如下图: 接着来探讨路由配置界面 import Vue from 'vue' import Router from 'vue-router' // import HelloWo ...
- vue动画使用javascript钩子函数
钩子函数从before-enter – enter –after-enter-entercancelled也是一个完整的生命周期 <transition v-on:before-enter= ...
- [前端] VUE基础 (5) (过滤器、生命周期、钩子函数)
一.过滤器 过滤器分为局部过滤器和全局过滤器. 1.局部过滤器 <body> <div id="app"> </div> <script ...
- Vue父子组件生命周期执行顺序及钩子函数的个人理解
先附一张官网上的vue实例的生命周期图,每个Vue实例在被创建的时候都需要经过一系列的初始化过程,例如需要设置数据监听,编译模板,将实例挂载到DOM并在数据变化时更新DOM等.同时在这个过程中也会运行 ...
- vue学习(五)生命周期 的钩子函数
生命周期的钩子函数 主要有以下几种 beforeCreate created beforeMount mounted beforeUpdate updated activated deactivate ...
- vue第十单元(动态组件 keep-alive(钩子函数) 递归组件(name) 组件命名约定)
第十单元(动态组件 keep-alive(钩子函数) 递归组件(name) 组件命名约定) #课程目标 熟练掌握动态组件的实现 掌握keep-alive缓存组件,以及相应的钩子函数 熟练掌握递归组件, ...
- Vue 路由知识二(工程模式下路由的配置)
vue-router是一个插件包,所以我们还是需要用npm/cnpm来进行安装的:npm/cnpm install vue-router --save-dev. 在路由的核心文件:src/router ...
- Vue - 解决路由过渡动画抖动问题
前言 Vue-Router 作为 Vue 的核心模块,它为我们提供了基于组件的路由配置.路由参数等功能,让单页面应用变得更易于管理.良好的路由管理尤为重要,比如路由拦截.路由懒加载.路由权限等都在开发 ...
- day 84 Vue学习四之过滤器、钩子函数、路由、全家桶等
本节目录 一 vue过滤器 二 生命周期的钩子函数 三 vue的全家桶 四 xxx 五 xxx 六 xxx 七 xxx 八 xxx 一 Vue的过滤器 1 moment.js 在这里我们先介绍一个 ...
随机推荐
- 程序员的vim
1,所有的Unix like系统都会内建vi文书编辑器,其他的文书编辑器则不一定会存在,但是目前我们使用比较多的是vim编辑器 vim具有程序编辑的能力,可以主动的以字体颜色辨别语法的正确性,方便程序 ...
- 揭开自然拼读法(Phonics)的神秘面纱
揭开自然拼读法(Phonics)的神秘面纱 自然拼读法 (Phonics),是指看到一个单词,就可以根据英文字母在单词里的发音规律把这个单词读出来的一种方法.即从“字母发音-字母组合发音-单词-简单 ...
- HTML与JSP页面的区别
HTML(Hypertext Markup Language)文本标记语言,它是静态页面,和JavaScript一样解释性语言,为什么说是解释性 语言呢?因为,只要你有一个浏览器那么它就可以正常显示出 ...
- 解决weblogic页面和控制台乱码问题
转自:https://blog.csdn.net/u010995831/article/details/53283746 之前一直有碰到weblogic各种乱码问题,要不就是页面乱码,要不就是控制台乱 ...
- asp.net mvc 多字段排序
以下代码可实现多字段排序,通过点击列标题,实现排序. 控制器: public ActionResult Index(string sortOrder) { ViewBag.FirstNameSortP ...
- 摘抄 - 不为人知的JS调用样式的方法---document.createElement().addRule(..)
很多人可能在调用css样式都是使用传统的方式调用其实有很多方法可以进行调用,如使用内嵌样式,在html直接加入样式,给定外部样式文件,在外部样式文件中使用 @import url(样式文件路径),这些 ...
- json 获取属性值
ajax后台获取json数据 前台赋值.由于值太多 一个个写 val会类似的.因为直接字段值和 前台的标签id相同,这样只要循环结果集json赋值即可. 这里需要用到json的字段值 var data ...
- 476. Number Complement(补数)
Given a positive integer, output its complement number. The complement strategy is to flip the bits ...
- Math对象常用方法(取整细节)
Math 对象 Math 对象用于执行数学任务. 1.常用属性: 1.E :返回算术常量e,即自然对数的底数(约2.718) 2.PI :返回圆周率,约3.14159 2.常用方法 Math.方 ...
- Oracle11.2.0.1升级到11.2.0.3
Oracle数据库升级也并非简单的事,这篇博客,博主对Oracle那点事做了较详细的介绍: http://blog.itpub.net/9599/viewspace-473003/ 我还属于Oracl ...