路由的钩子：（即导航守卫）

路由的钩子：（即导航守卫）

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', {

// ... 选项 ...

})

例如：

import Vue from 'vue';

 

//定义一个全局组件

Vue.component('myCom1',{

template:"<div>我是组件{{ count }} <button @click='go'>click</button></div>",

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引入的子组件自身添加要传递的属性

例如： <my-com1 :yonghu="user" :dizhi="address" :age="age"></my-com1>

 

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.cnblogs.com/zss1/p/9052211.html