For several VUE knowledge of understanding

About routing guard

Routing guard, also known as routing blocker, a very common situation, assuming a mall, you are not logged in before, you are not to log into the shopping cart, if forced to use various means to want to open the shopping cart page the interface, then you will eventually be sent to the log, will you shut this program.
Guard guards are divided into global and local guards, guarding the global routing definition file is written in it, will be executed whenever the routing switch

// 进入页面之前执行
router.beforeEach((to, from, next) => {
  // ...
  })
// 进入页面之后执行
router.afterEach((to, from) => {
  // ...
  })

You can see, there is the third argument.
to: display information to be way out of the jump, the information is contained in the object inside
from: the path routing information before the jump, shows that the "I" from where the
next: the control parameters of the route, commonly used next (true) and next (false)

Local guards written vue components inside, only take effect for the current component, and written as a function of the life cycle of vue

beforeRouteEnter (to, from, next) {
    // 在渲染该组件的对应路由被 confirm 前调用
    // 不！能！获取组件实例 `this`
    // 因为当守卫执行前，组件实例还没被创建
  },
  beforeRouteUpdate (to, from, next) {
    // 在当前路由改变，但是该组件被复用时调用
    // 举例来说，对于一个带有动态参数的路径 /foo/:id，在 /foo/1 和 /foo/2 之间跳转的时候，
    // 由于会渲染同样的 Foo 组件，因此组件实例会被复用。而这个钩子就会在这个情况下被调用。
    // 可以访问组件实例 `this`
  },
  beforeRouteLeave (to, from, next) {
    // 导航离开该组件的对应路由时调用
    // 可以访问组件实例 `this`
  }

About VUE life cycle

In fact, the earliest time to hear the life-cycle, I feel quite good fun, from a process did not appear to be right. But VUE life cycle of the process from scratch, particularly interesting. He went through a lot of process. With a map can represent this process.

Function of the life cycle, also known as "hook function", the name is quite strange, why is the "hook", by querying I found the answer, the hook function is part of the windows message handling mechanism, by setting the "hook" applications can for all messages, event filtering at the system level, access to information under normal circumstances can not be accessed . Essence is defined by a hook used to program a processing system messages, system calls, and hung into the system .

Simply put, those information would have been unable to see properly out with a tool to hook, hook tool refers to a function here.

There are 10 versions of VUE2.0 hook function in the

Lifecycle hook	Explanation
beforeCreate	在实例初始化之后，数据观测(data observer) 和 event/watcher 事件配置之前被调用。
created	实例已经创建完成之后被调用。在这一步，实例已完成以下的配置：数据观测(data observer)，属性和方法的运算， watch/event 事件回调。然而，挂载阶段还没开始，$el 属性目前不可见。
beforeMount	在挂载开始之前被调用：相关的 render 函数首次被调用。
mounted	el 被新创建的 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)
			}
		}
	}

In setUser we are used to traverse transferUser $ EMIT event and returns this.username
event wherein transferUser is a custom functions like a relay, to the parent component this.username pass through this event
parent component parts:

<template>
	<div id="app">
		<LoginDiv @transgerUser="getUser"></LoginDiv>
		<p>用户名为：{{user}}</p>
	</div>
</template>

In the parent component App.vue, declare a method getUser, call getUser method transferUser events, to get transferred from the sub-assembly over the parameters username

export default {
		name:'app',
		data() {
			return {
				user:''
			};
		},
		methods:{
			getUser(msg){
				this.user = msg
			}
		},
		components:{
			LoginDiv
		}
	}

Third, the sub-assembly to sub-assembly mass participation

No direct method of sub-sub-Vue parameter passing, recommended need to pass the data sub-assembly are combined into one component. If we need a reference sub-sub-transmission, it can be transmitted to start the parent component, subassembly and then spread.

getUser method msg parameter is passed over from the subassembly parameters username