useRouter与useRoute：Vue Router中的两个关键Hook，它们有何不同？_userouter useroute

Vue

• 什么是MVVM？

• mvvm和mvc区别？它和其它框架（jquery）的区别是什么？哪些场景适合？

• 组件之间的传值？

• Vue 双向绑定原理

• 描述下 vue 从初始化页面–修改数据–刷新页面 UI 的过程？

• 虚拟 DOM 实现原理

• Vue 中 key 值的作用？

• Vue 的生命周期

• Vue 组件间通信有哪些方式?

• vue 中怎么重置 data?

• 组件中写 name 选项有什么作用？

• Vue 的 nextTick 的原理是什么？

• Vuex 有哪几种属性?

  开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

  

  

在Vue.js框架中，Vue Router是官方的路由管理器，它与Vue.js深度集成，使得构建单页面应用（SPA）变得轻而易举。在Vue Router中，useRouter和useRoute是两个非常常用的Composition API Hooks，它们为我们提供了访问路由信息和操作路由的方法。但这两者之间有何不同呢？今天，我们就来深入探讨一下。

一、useRoute

useRoute是一个Composition API Hook，它返回当前路由的路由对象。这个路由对象包含了当前路由的许多信息，比如路径、参数、查询、hash等。

在组件中，我们可以使用useRoute来获取当前路由的信息，从而进行相应的操作。比如，我们可以根据路由参数的不同来展示不同的内容。

示例代码：

import { useRoute } from 'vue-router'  
  
export default {  
  setup() {  
    const route = useRoute()  
    console.log(route.path) // 输出当前路由的路径  
    console.log(route.params) // 输出当前路由的参数  
    console.log(route.query) // 输出当前路由的查询参数  
    // ... 其他操作  
  }  
}

二、useRouter

与useRoute不同，useRouter返回的是路由的实例，而不是当前路由的路由对象。通过这个路由实例，我们可以进行诸如导航、编程式导航等操作。

示例代码：

ES6

• 列举常用的ES6特性：

• 箭头函数需要注意哪些地方？

• let、const、var

• 拓展：var方式定义的变量有什么样的bug？

• Set数据结构

• 拓展：数组去重的方法

• 箭头函数this的指向。

• 手写ES6 class继承。

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

微信小程序

• 简单描述一下微信小程序的相关文件类型?

• 你是怎么封装微信小程序的数据请求？

• 有哪些参数传值的方法？

• 你使用过哪些方法，来提高微信小程序的应用速度？

• 小程序和原生App哪个好？

• 简述微信小程序原理？

• 分析微信小程序的优劣势

• 怎么解决小程序的异步请求问题？