vue理解四

1.导航故障

当前页面跳当前页，路径没有变只是参数改变。

解决方法就是重写路由的push,抑制报错。

const routerPush = VueRouter.prototype.push

routerPush.prototype.push= function(location){

    return routerPush.call(this,location).catch(error => error)
}

2.导航守卫

进入一个页面之前需要判断身份。

1.全局守卫

beforeEach 路由进入之前

afterEach  路由进入之后

2.路由独享守卫

beforeEnter 路由进入之前

3.组件内守卫

beforeRouteEnter 路由进入之前

beforeRouteUpdate 路由更新之前

beforeRouteLeave 路由离开之前

3.$set

数据更新，而是视图没有更新。

this.$set(target,key,修改值)

4.$nextTick

异步获取DOM,返回参数是函数，获取更新后的DOM

5.$el

获取当前组件的根节点

6.data

return 数据放在内部与外部区别：

外部没有被get set 劫持，单纯修改数据是不可以的

内部单纯修改数据是可以的

7.Vue-Router 几种模式区别？

三种模式：hash,history,abstract.

abstract不支持浏览器API环境使用，不依赖浏览器历史

hash + popState/hashChange 兼容性好但不美观，hash服务端无法获取不利于seo优化，#加路径

historyApi + popState 美观，刷新会出现404

hash代码：

let hange = function(){
    xx.innerHTML = window.location.hash.slice(1)
}

或

window.addEventListener('popstate'hange)

window.location.hash = ''

7.组件传值通信的方式

1.父传给子

单项绑定，父组件在引用的子组件上绑定一个值

子组件使用props进行接收

缺点：父无法直接传给孙组件,子不能直接修改父组件数据

子组件直接使用this.parent，拿到父组件数据。{{parent.xxx}}

孙组件获取this.$parent.$parent

子可以直接修改父组件数据。

依赖注入直接传给孙子 provide/inject 组件进行跳跃

父组件不需要一级一级传递。

父组件加入依赖项： provide（）{ return{ xxx:"xx" } }

子组件直接使用

inject:['xxx']

2.子传父

使用this.$emit

子组件使用 this.$emit（'自定义事件'，值）

父组件进行接收 @自定义事件="" 或通过this.$on接收

this.$on('自定义事件',val=>{

})

父组件直接获取子组件数据

ref="xxx"

this.$refs.child.xxx

可以直接修改子组值

3.兄弟传值 bus形式进行中转 新建一个bus工具类

8.插槽 slot

主要业务用于封装组件上

1.匿名插槽

2.具名插槽 加入name属性

3.作用域插槽 传值 传值:arr='arr' 接值：#footer='{arr}' 或 #footer='{arr,arr2}'

9.封装组件

将公用部分组件进行提取复用，创建一个新的组件vue文件，将结构及样式进行单独编写，同时将组件内部其他公用部分继续提取封装成组件，组件中使用插槽，进行组件传值。