part10 header界面渐隐渐显 //动态路由//项目动画
两个组件只同时显示一个 可以用 a v-show='variable' b: v-show='!variable'
1.对全局事件的解绑
//代码容易出现大量bug
因为影响其他组件
keep-alive还提供了一个生命周期函数 deactivated
执行事件:页面即将被隐藏或者页面即将被替换新的页面
window.removeEventListener('scroll',callback)
2.使用递归组件实现详情页的列表
3.ajax传递数据
mounted() {
this.axios.get('/api/', {
params: {
id: this.$route.params.id
}
})
},
//keep-alive 中 include exclude 控制单个组件的切换是否缓存
path: '/HelloWorld2/:id',
name: 'HelloWorld2',
component: HelloWorld2,
} handleRouter () {
//实现跳转的方式2
this.$router.push('/HelloWorld2/123');
}
<!--显示参数-->
{{$route.params.id}}
//route中的二级路由和beforeRouteUpdate() 控制多个组件在一个页面显示的 父组件缓存
同一个页面 点击切换路由,达到切换不同组件
{
path: '/',
name: 'first',
component: first,
children: [{
path: '/one',
name: 'one',
component: one
}, {
path: '/two',
name: 'two',
component: two
}, {
path: '/three',
name: 'three',
component: three
}]
} // 这个是路由设置 在根路径 / 后面的一级切换 {
path: '/first1',
name: 'first1',
component: first1,
children: [{
path: '/one1',
name: 'one1',
component: one1
}, {
path: '/two1',
name: 'two1',
component: two1
}, {
path: '/three1',
name: 'three1',
component: three1
}]
} 一直都是/first1 /one ... 首先显示的页面是/first1
beforeRouteUpdate (to, before, next) {
console.log(to)
this.name = to.params.name
next()
} //路由切换实现单个页面不同组件的切换
4.首页拖动滚动 会影响其他路由
文档中有一个滚动行为
只需要在router文件夹中 index再配置一项
scrollBehavior (to, from, savedPosition) {
return { x: 0, y: 0 }
}
每次路由切换 新进入显示的页面 x.y都会重置(始终回到最顶部)
5.项目中加入基础动画
组件中再建一个components fade //做一个渐隐渐显的动画
<template>
<transition>
<slot></slot>
</transition>
</template> <script>
export default {
data () {
return {}
}
}
</script> <style lang="stylus" type="text/stylus" scoped>
.v-enter, .v-leave-to
opacity 0
.v-enter-active, .v-leave-active
tansition opacity 2s
</style>
part10 header界面渐隐渐显 //动态路由//项目动画的更多相关文章
- UGUI 实现界面 渐隐渐现 FadeIn/Out 效果
孙广东 2015.7.10 事实上熟悉NGUI的人,应该知道 实现渐隐渐现 FadeIn/Out 效果是非常方便的,由于父对象 的 改变会自己主动影响到子对象. 比方 UIWidget.UIPan ...
- 利用 StartLoadingStatus 和 FinishLoadingStatus 读取数据特别是大数据时增加渐隐渐显等待特效 - Ehlib学习(三)
代码很简单: DBGrideh.StartLoadingStatus(' Loading ... '); Sleep(500); DBGrideh.FinishLoadingStatus; 做下变动: ...
- Spring Cloud (十三) Zuul:静态路由、静态过滤器与动态路由的实现
前言 本文起笔于2018-06-26周二,接了一个这周要完成的开发任务,需要先等其他人的接口,可能更新的会慢一些,还望大家见谅.这篇博客我们主要讲Spring Cloud Zuul.项目地址:我的gi ...
- 原生js实现图片网格式渐显、渐隐效果
写正文前先吐槽一下:端午放假完第一天去某千人以上公司面试前端工程师,第一轮是我应聘职位的部门小领导,谈的不错,面试主要围绕要用到的技术来:第二轮来了我要说的正主,我了个去,问的问题一个和前端无关,问我 ...
- 动态路由 - OSPF 一文详解
动态路由 在之前的文章中,介绍了基于距离矢量的路由协议.而在今天这这一部分中会主要讲解链路状态的路由协议,对于动态的路由协议来说,需要具备如下的能力: 发现远端网络 路由器可以直接获得直连路由,这是由 ...
- RIP、OSPF、BGP、动态路由选路协议、自治域AS
相关学习资料 tcp-ip详解卷1:协议.pdf http://www.rfc-editor.org/rfc/rfc1058.txt http://www.rfc-editor.org/rfc/rfc ...
- Ngnix技术研究系列2-基于Redis实现动态路由
上篇博文我们写了个引子: Ngnix技术研究系列1-通过应用场景看Nginx的反向代理 发现了新大陆,OpenResty OpenResty 是一个基于 Nginx 与 Lua 的高性能 Web 平台 ...
- 基于hi-nginx的web开发(python篇)——动态路由和请求方法
hi.py的提供的路由装饰器接受两个参数,第一个参数指定动态路由的正则模式,第二个参数指定同意的http请求方法列表. 比如: @app.route(r"^/client/?$", ...
- vue+iview实现动态路由和权限验证
github上关于vue动态添加路由的例子很多,本项目参考了部分项目后,在iview框架基础上完成了动态路由的动态添加和菜单刷新.为了帮助其他需要的朋友,现分享出实现逻辑,欢迎一起交流学习. Gith ...
随机推荐
- 连接数据库 - (mysql-thinkphp) (2)
1.现在conf里面写好选择的数据库 选择好了以后 2.在index里面输入 查询mysql数据库里面的表tables_priv的所有数据 public function index() { $res ...
- 用 k8s 管理机密信息【转】
应用启动过程中可能需要一些敏感信息,比如访问数据库的用户名密码或者秘钥.将这些信息直接保存在容器镜像中显然不妥,Kubernetes 提供的解决方案是 Secret. Secret 会以密文的方式存储 ...
- mysql日常小总结(其实就今天)
联表查询: SELECT t1.user_Name FROM t_user AS t1 , t_comment AS t2 WHERE t2.user_id=t1.id 结果如图: 加上GRO ...
- SSM 整合配置以及一个简单登陆案例(个人记录)
SSM 文件以及大部分参考博客 https://blog.csdn.net/qq598535550/article/details/51703190 简答的登陆注册案例下载链接在末尾补贴图了 我建立的 ...
- 八、Vue-lazyload
一.Vue懒加载 文档:https://github.com/hilongjw/vue-lazyload 1.安装 cnpm i vue-lazyload -S 或 npm i vue-lazyloa ...
- 解决物理机U盘安装Kali Linux2018.1,光驱无法加载问题
1.无效的方法: (1)执行 df -m,然后查看U盘设备是否挂载到了/media,导致cd-rom不能被挂载,执行 umount /media. (2)在光驱加载安装界面,把U盘拔下换到电脑的另外 ...
- C语言备忘录——static
对于这个关键字我一直没有弄清楚,今天特地去花了一定的时间去理解这个关键字.在函数或变量声明时,在数据类型前加上 static 后会有以下几个效果 一.用于函数定义时: 1.函数的链接属性会被修改,从e ...
- POJ 3252:Round Numbers
POJ 3252:Round Numbers Time Limit: 2000MS Memory Limit: 65536K Total Submissions: 10099 Accepted: 36 ...
- 小程序填坑:2018最新getPhoneNumber功能详解
本篇博客主要详解getPhoneNumber组件的功能,填补网上那些到处是漏洞的博客.加上小程序官方本身也是满满的漏洞. 惯例先上总纲: ##主要内容 1.前端页面组件书写 2.JS内组件用法 3.接 ...
- Block循环引用问题(Objective-c)
造成循环引用的简单理解是:Block的拥有者在Block作用域内部又引用了自己,因此导致了Block的拥有者永远无法释放内存,就出现了循环引用的内存泄漏 示例代码 @interface ObjTest ...