路由的钩子：（即导航守卫）
1.全局的,
const router = new VueRouter({ ... })
router.beforeEach((to, from, next) => {
// ...
})
2.单个路由独享的
const router = new VueRouter({
routes: [
{
path: '/foo',
component: Foo,
beforeEnter: (to, from, next) => {
// ...
}
}
]
})
3.组件级的。
beforeRouteEnter
beforeRouteUpdate (2.2 新增)
beforeRouteLeave
const Foo = {
template:...,
beforeRouteEnter (to, from, next) {
// 在渲染该组件的对应路由被 confirm 前调用
// 不！能！获取组件实例this
// 因为当守卫执行前，组件实例还没被创建
},
beforeRouteUpdate (to, from, next) {
// 在当前路由改变，但是该组件被复用时调用
// 举例来说，对于一个带有动态参数的路径 /foo/:id，在 /foo/1 和 /foo/2 之间跳转的时候，
// 由于会渲染同样的 Foo 组件，因此组件实例会被复用。而这个钩子就会在这个情况下被调用。
// 可以访问组件实例this
},
beforeRouteLeave (to, from, next) {
// 导航离开该组件的对应路由时调用
// 可以访问组件实例this
}
}
路由元信息：给路由表每项添加的meta
例如：
{name:'find', path:'/find', component:find, meta:{ title:'我是发现组件', },
===========================5.16组件通讯==========================================
组件通讯
一、组件：组件是可复用的 Vue 实例
二、创建组件：
1.全局组件Vue.component('my-component-name', {// ... 选项 ...})
例如：
importVuefrom'vue';//定义一个全局组件Vue.component('myCom1',{template:"
三、组件通讯
父传子:
1.创建两个组件A.vue和B.vue，并在A.vue中引入B.vue，并注册
2.在A.vue引入的子组件自身添加要传递的属性
例如： 3.在B组件中接收A.vue组件中传递过来的值，通过props接收 具体props有两种写法：数组和对象（带验证） 例如： export default {//props:['yonghu','dizhi','age'],props:{'yonghu':{type:[String] },'dizhi':{type:String },'age':{type:Number,default:0} },
子传父：主要通过事件派发实现，具体通过$emit实现
派发事件：$emit() 接收事件：@事件名戒v-on
兄弟之间：（即非父子）
作者：奇妙雨
链接：https://www.jianshu.com/p/f524ecbdad28
來源：
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。