路由的钩子：（即导航守卫）
1.全局的,
constrouter =newVueRouter({ ... })router.beforeEach((to,from, next) =>{// ...})
2.单个路由独享的
constrouter =newVueRouter({routes: [ {path:'/foo',component: Foo,beforeEnter:(to,from, next) =>{// ...} } ]})
3.组件级的。
beforeRouteEnterbeforeRouteUpdate (2.2新增)beforeRouteLeaveconstFoo = {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', {// ... 选项 ...})
例如：
import Vue from'vue';//定义一个全局组件 Vue.component('myCom1',{template:"
我是组件{{ count }} click", data() {return{count:100} },methods:{ go() { console.log('我是组件1的go方法'); } } });2.局部组件 var ComponentA = {/* ... */} 然后在 components 选项中定义你想要使用的组件： new Vue({el:'#app'components:{'component-a': ComponentA, }三、组件通讯 父传子: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兄弟之间：（即非父子）
1.Event Bus:通过一个空的vue（即桥梁）实现兄弟之间数据传递 第一步：创建两个兄弟组件并引入到其他组件中 例如：son1,son2 第二步：创建一个空的vue 例如：bus.js 第三步：分别在两个兄弟组件中引入bus.js 第四步：例如：son1数据发送给son2,在son1通过触发一个事件响应来派发importBusfrom'@/components/common/bus';向son2发送数据methods:{ goToSon2() {// 派发事件Bus.$emit('ok',this.msg) } 第五步：在生命周期钩子上监听son1派发过来的事件 $on created(){//监听事件Bus.$on('ok',(v)=>{// console.log(v);this.name=v; }) }
网友评论