关于路由守卫
路由守卫,又称之为路由拦截器, 很常见的一种情况,假设一个商城,在你没有登录之前,你是登录不进去购物车的,如果强行用各种手段想要打开购物车的页面,那么你最终都会被送到登录的界面上,这个程序会将你拒之门外。
守卫又分为全局守卫和局部守卫,全局守卫是写在路由定义文件里面,每当路由切换就会执行
// 进入页面之前执行
router.beforeEach((to, from, next) => {
// ...
})
// 进入页面之后执行
router.afterEach((to, from) => {
// ...
})
可以看到,这里有第三个参数。
to:显示出路由将要跳转的信息,信息是包含在对象里面的
from:路由跳转前的路径信息,表明了“我”来自于哪里
next:路由的控制参数,常用的有next(true)和next(false)
局部守卫写在vue组件里面,只对当前组件生效,和vue生命周期函数写法一样
beforeRouteEnter (to, from, next) {
// 在渲染该组件的对应路由被 confirm 前调用
// 不!能!获取组件实例 `this`
// 因为当守卫执行前,组件实例还没被创建
},
beforeRouteUpdate (to, from, next) {
// 在当前路由改变,但是该组件被复用时调用
// 举例来说,对于一个带有动态参数的路径 /foo/:id,在 /foo/1 和 /foo/2 之间跳转的时候,
// 由于会渲染同样的 Foo 组件,因此组件实例会被复用。而这个钩子就会在这个情况下被调用。
// 可以访问组件实例 `this`
},
beforeRouteLeave (to, from, next) {
// 导航离开该组件的对应路由时调用
// 可以访问组件实例 `this`
}
关于VUE的生命周期
其实最早的时候听到这个生命周期,感觉挺好玩,从出现到没的一个过程是吧。但是VUE的生命周期从无到有的这个过程,特别有意思。他经历了很多过程。用一张图可以表示这个过程。
关于生命周期的函数,又称作“钩子函数”,这个名字相当奇怪,为什么是“钩子”,通过查询我找到了相关的答案,钩子函数是windows消息处理机制的一部分,通过设置“钩子”,应用程序可以在系统级对所有消息,事件进行过滤,访问在正常情况下无法访问的信息。钩子的本质是一段用以处理系统消息的程序,通过系统调用,把它挂入系统。
简单来说,就是把那些本来无法正常看到的信息用工具给勾出来了,这里的工具指的就是钩子函数。
在VUE2.0的版本中有10个钩子函数
生命周期钩子 | 说明 |
---|---|
beforeCreate | 在实例初始化之后,数据观测(data observer) 和 event/watcher 事件配置之前被调用。 |
created | 实例已经创建完成之后被调用。在这一步,实例已完成以下的配置:数据观测(data observer),属性和方法的运算, watch/event 事件回调。然而,挂载阶段还没开始,$el 属性目前不可见。 |
beforeMount | 在挂载开始之前被调用:相关的 render 函数首次被调用。 |
mounted | el 被新创建的 vm. e l 替 换 , 并 挂 载 到 实 例 上 去 之 后 调 用 该 钩 子 。 如 果 r o o t 实 例 挂 载 了 一 个 文 档 内 元 素 , 当 m o u n t e d 被 调 用 时 v m . el 替换,并挂载到实例上去之后调用该钩子。如果 root 实例挂载了一个文档内元素,当 mounted 被调用时 vm. el替换,并挂载到实例上去之后调用该钩子。如果root实例挂载了一个文档内元素,当mounted被调用时vm.el 也在文档内。 |
beforeUpdate | 数据更新时调用,发生在虚拟 DOM 重新渲染和打补丁之前。你可以在这个钩子中进一步地更改状态,这不会触发附加的重渲染过程。 |
updated | 由于数据更改导致的虚拟 DOM 重新渲染和打补丁,在这之后会调用该钩子。当这个钩子被调用时,组件 DOM 已经更新,所以你现在可以执行依赖于 DOM 的操作。 |
activated | keep-alive 组件激活时调用。 |
deactivated | keep-alive 组件停用时调用。 |
beforeDestroy | 实例销毁之前调用。在这一步,实例仍然完全可用。 |
destroyed | Vue 实例销毁后调用。调用后,Vue 实例指示的所有东西都会解绑定,所有的事件监听器会被移除,所有的子实例也会被销毁。 |
除了beforeCreate和created钩子之外,其他钩子均在服务器端渲染期间不被调用
VUE组件之间的传参
很多人感觉这个是比较难的,其实就分步骤来记的话也并不难,父子组件之间的传参和人与人之间的通信是一样的,人与人之间还需要掏出手机,拨号然后等待相应。其实在代码的世界里也是一样的道理
一、父组件向子组件传递数据
这里我们可以使用props向子组件传输数据
我们模拟一下现场
<template>
<header class="header">
<div id="logo">{{logo}}</div>
<ul class="nav">
<li v-for="nav in navs">{{nav.li}}</li>
</ul>
</header>
</template>
这是 header.vue 的 HTML 部分,logo 是在 data 中定义的变量。
如果需要从父组件获取 logo 的值,就需要使用 props: [‘logo’]
<script>
export default{
name:'headerDiv',
data(){
return{
navs:[
{li:'主页'},
{li:'日志'},
{li:'说说'},
{li:'相册'},
]
}
},
props:['logo']
}
</script>
在 props 中添加了元素之后,就不需要在 data 中再添加变量了
在父组件部分中:
<template>
<div id="app">
<HeaderDiv :logo="logoMsg"></HeaderDiv>
</div>
</template>
在调用组件的时候,我们是用v-bind或者上面这种的简写方法将 logo 的值绑定为 App.vue 中定义的变量 logoMsg
import HeaderDiv from './components/header'
export default {
name:'app',
data() {
return {
logo:'WiseWrong'
};
},
components:{
HeaderDiv
}
}
然后就能将App.vue中 logoMsg 的值传给 header.vue 了:
二、子组件向父组件传递数据
子组件部分:
<template>
<seation>
<lable>
<span>用户名:</span>
<input v-model="username" @change="setUser" />
</lable>
</seation>
</template>
这是 login.vue 的 HTML 部分,当的值发生变化的时候,将 username 传递给 App.vue
首先声明一个了方法 setUser,用 change 事件来调用 setUser
export default {
name:'login',
data() {
return {
username:''
};
},
methods:{
setUser:function(){
this.$emit('transferUser',this.username)
}
}
}
在 setUser 中,使用了 $emit 来遍历 transferUser 事件,并返回 this.username
其中 transferUser 是一个自定义的事件,功能类似于一个中转,this.username 将通过这个事件传递给父组件
父组件部分:
<template>
<div id="app">
<LoginDiv @transgerUser="getUser"></LoginDiv>
<p>用户名为:{{user}}</p>
</div>
</template>
在父组件 App.vue 中,声明了一个方法 getUser,用 transferUser 事件调用 getUser 方法,获取到从子组件传递过来的参数 username
export default {
name:'app',
data() {
return {
user:''
};
},
methods:{
getUser(msg){
this.user = msg
}
},
components:{
LoginDiv
}
}
三、子组件向子组件传参
Vue 没有直接子对子传参的方法,建议将需要传递数据的子组件,都合并为一个组件。如果一定需要子对子传参,可以先从传到父组件,再传到子组件。
getUser 方法中的参数 msg 就是从子组件传递过来的参数 username