Vue 问题及解决方法 router守卫next问题,总线传值,sass中&的使用 (二)

---

Vue开发问题解决 (一)

Vue 问题及解决方法 key值,v-bind:src,7中路由守卫 (一)

---

一、关于路由守卫的next()问题

> 1.路由守卫默认情况下,自动调用next()
> 2.如果我们手动配置路由守卫,一定要加 next(),否则就会被拦截,无法执行
> 3.在全局后置守卫中,不用添加next()  因为afterEach() 是最后一个执行的路由守卫

例子:如下图:

//路由守卫中 next() 是每一个路由守卫都具有的参数
//例如: 下面的路由守卫
router.beforeEach((to, from, next) => {
    //to是去哪里(目标路由对象)  from 是从哪里来(跳转前的路由) next()是执行到这一步的时候继续执行下一个路由
    console.log("全局的前置守卫");

})

二、总线传值

Vue2中的总线传值:

问题:在脚手架中怎么使用总线传值?

解决办法: 添加一个 window.event=new Vue() 在window上创建一个Vue实例

//在main.js中创建另外一个个Vue实例(总线)
window.event=new Vue()

//在向外传值的组件方法中,通过$emit()  发射事件
window.event.$emit('方法名1',参数)

//在接受值的组件方法中,通过$on()  监听发射的事件
window.event.$on('方法名1',fucniton(v){
	//v是$emit传递过来的参数
})

Vue3中的总线传值:

> Vue3中由于使用的不是Vue() 实例创建的对象,所以不支持 使用总线传值
当时写文章的时候,还未发现 mitt ,单纯从创建实例的角度判断的不支持,现在补上!!!!!
下方链接为Vue3的总线传值
Vue中的总线传值

三、Sass中 &(连接符的问题)

问题:1.不知道什么时候使用 2.使用的方式不正确

解决方法:
1.在需要给元素添加伪类的时候,使用连接符 通过 &:hover{} 的方式
2.在使用 sass或者less的时候,一定要正确使用 连接符&

//下方css   表示:  当鼠标移动到div上的时候,div字体颜色变为 red 色
div {
	&:hover{
		color:red
	}
}
//上方的css 类似下面css
div:hover{color: red}

---