VUE面试题汇总（八）

往期点这里：↓
VUE面试题汇总（一）
VUE面试题汇总（二）
VUE面试题汇总（三）
VUE面试题汇总（四）
VUE面试题汇总（五）
VUE面试题汇总（六）
VUE面试题汇总（七）
71. vuex 有哪几种属性？

参考答案：

有五种，分别是 State、 Getter、Mutation 、Action、 Module

vuex的State特性

A、Vuex就是一个仓库，仓库里面放了很多对象。其中state就是数据源存放地，对应于一般Vue对象里面的data
B、state里面存放的数据是响应式的，Vue组件从store中读取数据，若是store中的数据发生改变，依赖这个数据的组件也会发生更新
C、它通过mapState把全局的 state 和 getters 映射到当前组件的 computed 计算属性中

· vuex的Getter特性

A、getters 可以对State进行计算操作，它就是Store的计算属性
B、虽然在组件内也可以做计算属性，但是getters 可以在多组件之间复用
C、如果一个状态只在一个组件内使用，是可以不用getters

· vuex的Mutation特性

Action 类似于 mutation，不同在于：Action 提交的是 mutation，而不是直接变更状态；Action 可以包含任意异步操作。

72. 不用 Vuex 会带来什么问题？

参考答案：

可维护性会下降，想修改数据要维护三个地方；

可读性会下降，因为一个组件里的数据，根本就看不出来是从哪来的；

增加耦合，大量的上传派发，会让耦合性大大增加，本来 Vue 用 Component 就是为了减少耦合，现在这么用，和组件化的初衷相背。

73. vue-router 如何响应路由参数的变化？

参考答案：

什么是路由参数的变化

当使用路由参数时，例如从 /user/foo 导航到 /user/bar，原来的组件实例会被复用。因为两个路由都渲染同个组件，比起销毁再创建，复用则显得更加高效。不过，这也意味着组件的生命周期钩子不会再被调用。

监测路由参数变化的方法

方法一watch监听：

watch: { // watch的第一种写法
    $route (to, from) {
        console.log(to)
        console.log(from)
    }
},
 
====
 
watch: { // watch的第二种写法
    $route: {
        handler (to, from){
            console.log(to)
            console.log(from)
        },
        // 深度观察监听
        deep: true
    }
},
 
====
 
watch: { // watch的第三种写法
    '$route':'getPath'
},
methods: {
    getPath(to, from){
        console.log(this.$route.path);
    }
},

方法二：导航守卫

beforeRouteEnter (to, from, next) {
    console.log('beforeRouteEnter被调用：在渲染该组件的对应路由被 confirm 前调用')
    // 在渲染该组件的对应路由被 confirm 前调用
    // 不！能！获取组件实例 `this` 因为当守卫执行前，组件实例还没被创建
    // 可以通过传一个回调给 next来访问组件实例。在导航被确认的时候执行回调，并且把组件实例作为回调方法的参数。
    next(vm => {
        // 通过 `vm` 访问组件实例
        console.log(vm)
    })
},
// beforeRouteEnter 是支持给 next 传递回调的唯一守卫。
// 对于 beforeRouteUpdate 和 beforeRouteLeave 来说，this 已经可用了，所以不支持传递回调，因为没有必要了。
beforeRouteUpdate (to, from, next) {
    // 在当前路由改变，但是该组件被复用时调用
    // 举例来说，对于一个带有动态参数的路径 /foo/:id，在 /foo/1 和 /foo/2 之间跳转的时候，
    // 由于会渲染同样的 Foo 组件，因此组件实例会被复用。而这个钩子就会在这个情况下被调用。
    // 可以访问组件实例 `this`
    console.log('beforeRouteUpdate被调用：在当前路由改变，但是该组件被复用时调用')
    next()
},
beforeRouteLeave (to, from, next) {
    // 导航离开该组件的对应路由时调用
    // 可以访问组件实例 `this`
    const answer = window.confirm('是否确认离开当前页面')
    if (answer) {
        console.log('beforeRouteLeave被调用：导航离开该组件的对应路由时调用')
        next()
    } else {
        next(false)
    }
},

74. 完整的 vue-router 导航解析流程

参考答案：

导航被触发。
在失活的组件里调用 beforeRouteLeave 守卫。
调用全局的 beforeEach 守卫。
在重用的组件里调用 beforeRouteUpdate 守卫 (2.2+)。
在路由配置里调用 beforeEnter。
解析异步路由组件。
在被激活的组件里调用 beforeRouteEnter。
调用全局的 beforeResolve 守卫 (2.5+)。
导航被确认。
调用全局的 afterEach 钩子。
触发 DOM 更新。
调用 beforeRouteEnter 守卫中传给 next 的回调函数，创建好的组件实例会作为回调函数的参数传入。

75. vue-router 有哪几种导航钩子（导航守卫）？

参考答案：
三种

第一种:全局导航钩子：router. beforeEach(to, from, next)，作用：跳转前进行判断拦截。
第二种：组件内的钩子；
第三种：单独路由独享组件

76. vue-router 的几种实例方法以及参数传递

参考答案：
参考

77. 怎么定义 vue-router 的动态路由？怎么获取传过来的动态参数？

参考答案：

在 router 目录下的 index. js 文件中，对 path 属性加上/:id。使用 router 对象的 params. id

78. vue-router 如何定义嵌套路由？

参考答案：
参考

79. <router-link></router-link> 组件及其属性

参考答案：

<router-link> 组件支持用户在具有路由功能的应用中 (点击) 导航。通过 to 属性指定目标地址，默认渲染成带有正确链接的 <a> 标签，可以通过配置 tag 属性生成别的标签.。另外，当目标路由成功激活时，链接元素自动设置一个表示激活的 CSS 类名。

<router-link> 比起写死的 <a href="..."> 会好一些，理由如下：

无论是 HTML5 history 模式还是 hash 模式，它的表现行为一致，所以，当你要切换路由模式，或者在 IE9 降级使用 hash 模式，无须作任何变动。
在 HTML5 history 模式下，router-link 会守卫点击事件，让浏览器不再重新加载页面。
当你在 HTML5 history 模式下使用 base 选项之后，所有的 to 属性都不需要写 (基路径) 了。

属性：参考Vue.js官网API

80. vue-router 实现路由懒加载（动态加载路由）

参考答案：参考