VUE中常见的面试题目

1.vue 的双向绑定原理

关于MVC 和MVVM 结构

2.vue-router

 vue-router的实现

主要为了解决单页面应用的问题，实现了页面跳转但是不重新发送请求，vue-router的实现模式包括了

1.hash模式

hash模式主要利用浏览器中输入的URL#之后的内容改变，页面也不会刷新,

2. history.pushState 

利用h5中的history.pushState()API可以不产生#但因为没有 # 号，所以当用户刷新页面之类的操作时，浏览器还是会给服务器发送请求。为了避免出现这种情况，所以这个实现需要服务器的支持，需要把所有路由都重定向到根页面。

 vue-router的使用

1.动态路由匹配

可以通过在path中添加:id来对有不同id的页面进行匹配，可以通过this.$routrt.params.id来获取不同页面的id

2.路由的嵌套

可以通过children来匹配路由

3.编程式的导航，

this.$router.push(path:'' query:)

路由导航守卫

可以用router.beforeEach()来注册一个 全局前置守卫

router.beforeEach((to, from, next) => {
  // ...
})

当一个导航触发时，全局前置守卫按照创建顺序调用。守卫是异步解析执行，此时导航在所有守卫 resolve 完之前一直处于 等待中

全局解析守卫 router.beforeResolve在导航被确认之前，同时在所有组件内守卫和异步路由组件被解析之后，解析守卫就被调用

你也可以注册全局后置钩子，然而和守卫不同的是，这些钩子不会接受 next 函数也不会改变导航本身：

你可以在路由配置上直接定义 beforeEnter 守卫：

• beforeRouteEnter  组件实例还未被创建，不能访问this
• beforeRouteUpdate (2.2 新增)
• beforeRouteLeave
•  
• 导航被触发。
• 在失活的组件里调用离开守卫。
• 调用全局的 beforeEach 守卫。
• 在重用的组件里调用 beforeRouteUpdate 守卫 (2.2+)。
• 在路由配置里调用 beforeEnter。
• 解析异步路由组件。
• 在被激活的组件里调用 beforeRouteEnter。
• 调用全局的 beforeResolve 守卫 (2.5+)。
• 导航被确认。
• 调用全局的 afterEach 钩子。
• 触发 DOM 更新。
• 用创建好的实例调用 beforeRouteEnter 守卫中传给 next 的回调函数。

来源：CSDN

作者：gdloveyl

链接：https://blog.csdn.net/gdloveyl/article/details/104307213