旅游管理App开发第七天：技术点汇总以及遇到问题的解决办法

1.router-link 中的 tag

类型: string

默认值: “a”

如果想要 <router-link> 渲染成某种标签，例如 <li>。于是我们使用 tag prop 类指定何种标签，同样它还是会监听点击，触发导航。

  <router-link :to="'index'"
               tag="li"
               event="mouseover">Home
  </router-link>

如果此时我们想要在这个li标签中添加a标签,如下所示，可以不为a标签添加href属性即可哦

<router-link :to="{name:'Home'}" tag="li">
<a>Home</a>
</router-link>

在这种情况下，将作为真实的链接 (它会获得正确的 href 的)，而 “激活时的CSS类名” 则设置到外层的

在这里插入图片描述
1. 每次在 www.iconfont.cn 获取新 icon 时需要在一下文件中更改路径：加上./iconfont/，不然icon 无法正常显示

在这里插入图片描述

2.点击图片出现画廊组件，基础逻辑业务代码

用到swiper 3 中的轮播组件加上一些属性，控制手动滑动

在这里插入图片描述
注意:

observer: true, // 每次刷新一次，重新定位
observeParents: true // observer observeParents 经常一起使用 具体看官方文档

这两行属性在这里必须要加，是监听器：每次打开Gallary都会重新定位，即初始化，方式样式错乱，导致手动轮播无效

在这里插入图片描述

在这里插入图片描述

scroll翻译过来就是滚动。在js中称为滚动事件，当用户滚动到指定位置或元素时会触发scroll事件。

scroll事件适用于所有可滚动的元素和window对象（浏览器窗口），scroll()方法触发scroll事件，或规定scroll事件时，运行的函数。

   $(document).height();//整个网页的高度

   $(window).height();//浏览器可视窗口的高度

   $(window).scrollTop();//浏览器可视窗口顶端距离网页顶端的高度（垂直偏移）

由于我们在app.vue中添加了 <keep-alive></keep-alive>,此时我们多了两个生命钩子 activated () deactivated ()

官方文档解释：
在这里插入图片描述

我的理解：

activated钩子：

第一次进入缓存路由/组件，在mounted后面，beforeRouteEnter守卫传给 next 的回调函数之前调用：

 beforeMount=> 如果你是从别的路由/组件进来(组件销毁destroyed/或离开缓存deactivated)=>
    mounted=> activated 进入缓存组件 => 执行 beforeRouteEnter回调

因为组件被缓存了，再次进入缓存路由/组件时，不会触发这些钩子：

 // beforeCreate created beforeMount mounted 都不会触发。

所以之后的调用时机是：

   组件销毁destroyed/或离开缓存deactivated => activated 进入当前缓存组件 
    => 执行 beforeRouteEnter回调
    // 组件缓存或销毁，嵌套组件的销毁和缓存也在这里触发

deactivated钩子 ：

页面即将被隐藏或者即将被替换时开始执行

bug出现: 切换组件时，scroll事件还在不断执行，严重影响性能

在这里插入图片描述

全局事件的解绑

在这里插入图片描述