每天10个vue面试题(七)

1、Vue如何监听页面url中hash变化？

• 监听 $route 的变化：在Vue中，你可以使用watch属性来监听$route的变化。当路由发生变化时，会执行相应的处理函数。
• 使用 window.location.hash：直接读取window.location.hash的值。这个属性可读可写。绑定一个hashChange事件即可监听到。

---

2、$route 和 $router 的区别？

• $route 和 $router 是Vue Router提供的两个对象。
• $route 是一个只读对象，代表了当前活动的路由信息，包括路径、参数、查询字符串等。它用于获取路由的信息。
• $router 是 Vue Router 的实例，提供了一些方法用于导航路由，如 push、replace 和 go。它用于在应用程序中进行路由导航操作

---

3、params和query的区别？

• params 是通过路径的一部分来传递参数，用于捕获和处理特定的路由请求。参数是必需的，出现在路径中，可以通过 $route.params 访问。
• query 是通过查询字符串来传递参数，用于配置和过滤路由请求。参数是可选的，出现在 URL 的查询字符串中，可以通过 $route.query 访问。
• 总结：监听 hashchange 事件可获取页面哈希的变化；$route 用于获取当前路由信息，$router 用于进行路由导航；params 通过路径传递参数，query 通过查询字符串传递参数。

---

4、刷新页面时，params和query的差异？

• 对于params，当页面刷新时，参数会丢失，因为参数只存在于URL路径中，并不会被浏览器记忆。
• 对于query，当页面刷新时，参数不会丢失，因为参数是作为查询字符串出现在URL中，浏览器会自动保留这些参数。

---

5、Vue-router你们用的哪个版本？

v3和v4版本都用了，老项目使用了vue2 + vue-router3.x，新项目使用vue3 + vue-router4.x

---

6、Vue动态路由传参有几种方法？

• 动态路由：就是不确定的路由，需要传递动态参数来拼接为真实的路由
•       1. params 方式
• 配置路由格式：/router/:id
• 传递的方式：在path后面跟上对应的值
• 传递后形成的路径：/router/123
•       2. query 方式
• 配置路由格式：/router，也就是普通配置
• 传递的方式：对象中使用query的key作为传递方式
• 传递后形成的路径：/route?id=123

---

7、Vue动态路由传参具体用法？

params 方式具体用法：
      1. 路由定义
      // 在APP.vue中
      <router-link :to="'/user/'+userId" replace>用户</router-link>    
      
      //在index.js
      {
         path: '/user/:userid',
         component: User,
      },
      2. 路由跳转
      // 方法1：
      <router-link :to="{ name: 'users', params: { uname: wade }}">按钮</router-link
      // 方法2：
      this.$router.push({name:'users',params:{uname:wade}})
      // 方法3：
      this.$router.push('/user/' + wade)
      3. 参数获取：通过 $route.params.userid 获取传递的值
query 方式具体用法：
      1. 路由定义
      //方式1：直接在router-link 标签上以对象的形式
      <router-link :to="{ path: '/user', query: { name: 'tom', age: 18 }}"></router-link>

      // 方式2：写成按钮以点击事件形式
      this.$router.push({
        path: "/user",
        query: {
          name: "tom",
          age: "18",
        }
      })
      2. 跳转方法
      // 方法1：
      <router-link :to="{ name: 'users', query: { uname: james }}">按钮</router-link>
      // 方法2：
      this.$router.push({ name: 'users', query:{ uname:james }})
      // 方法3：
      <router-link :to="{ path: '/user', query: { uname:james }}">按钮</router-link>
      // 方法4：
      this.$router.push({ path: '/user', query:{ uname:james }})
      // 方法5：
      this.$router.push('/user?uname=' + jsmes)
      3. 参数获取：通过$route.query 获取传递的值

---

8、Vue-router 路由钩子函数有哪些？

•       简单的回答：
• 全局前置/钩子：beforeEach、beforeResolve、afterEach
• 路由独享的守卫：beforeEnter
• 组件内的守卫：beforeRouteEnter、beforeRouteUpdate、beforeRouteLeave
•       详细的回答：
•       1. 全局有三个路由钩子：
• outer.beforeEach：全局前置守卫 进入路由之前，接收参数(to, from, next)
• router.beforeResolve：全局解析守卫在 beforeRouteEnter 调用之后调用，接收参数(to, from, next)
• router.afterEach：全局后置钩子 进入路由之后调用，接收参数(to, from)
•       2. 路由独享的守卫
• 可以在路由配置上直接定义 beforeEnter 守卫
•       3. 组件内的守卫
• beforeRouteEnter：在渲染该组件的对应路由被 confirm 前调用，不能获取组件实例this，因为当守卫执行前，组件实例还没被创建
• beforeRouteUpdate (2.2 新增)：在当前路由改变，但是该组件被复用时调用，可以访问组件实例this
• beforeRouteLeave：导航离开该组件的对应路由时调用，可以访问组件实例this

---

9、导航守卫，完整的导航解析流程？

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

---

10、路由守卫：参数 to、from、next 的含义？

• to: Route: 即将要进入的目标 路由对象
• from: Route: 当前导航正要离开的路由
•  next: Function: 一定要调用该方法来 resolve 这个钩子。执行效果依赖 next 方法的调用参数。
• next(): 进行管道中的下一个钩子。如果全部钩子执行完了，则导航的状态就是 confirmed (确认的)。
• next(false): 中断当前的导航。如果浏览器的 URL 改变了 (可能是用户手动或者浏览器后退按钮)，那么 URL 地址会重置到 from 路由对应的地址。
• next('/') 或者 next({ path: '/' }): 跳转到一个不同的地址。当前的导航被中断，然后进行一个新的导航。你可以向 next 传递任意位置对象，且允许设置诸如 replace: true、name: 'home' 之类的选项以及任何用在 router-link 的 to prop 或 router.push 中的选项。
• next(error): (2.4.0+) 如果传入 next 的参数是一个 Error 实例，则导航会被终止且该错误会被传递给 router.onError() 注册过的回调。