标签:router com 调用 实例 regex 注册 this vue -name
路由的钩子:(即导航守卫)
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
兄弟之间:(即非父子)
1. Event Bus:通过一个空的vue(即桥梁)实现兄弟之间数据传递
第一步:创建两个兄弟组件并引入到其他组件中 例如:son1,son2
第二步:创建一个空的vue 例如:bus.js
第三步:分别在两个兄弟组件中引入bus.js
第四步:例如:son1数据发送给son2,在son1通过触发一个事件响应来派发
import Bus from ‘@/components/common/bus‘;
<button @click="goToSon2">向son2发送数据</button>
methods:{
goToSon2() {
// 派发事件
Bus.$emit(‘ok‘,this.msg)
}
第五步:在生命周期钩子上监听son1派发过来的事件 $on
created(){
//监听事件
Bus.$on(‘ok‘,(v)=>{
// console.log(v);
this.name=v;
})
}
标签:router com 调用 实例 regex 注册 this vue -name
原文地址:https://www.cnblogs.com/zbcry/p/9052923.html