每天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
1. query 方式
配置路由格式：/router，也就是普通配置
传递的方式：对象中使用query的key作为传递方式
传递后形成的路径：/route?id=123

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

params 方式具体用法：

路由定义

// 在APP.vue中

<router-link :to="'/user/'+userId" replace>用户</router-link>

//在index.js

{

path: '/user/:userid',

component: User,

路由跳转

// 方法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)

参数获取：通过 $route.params.userid 获取传递的值

query 方式具体用法：

路由定义

//方式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",

}

})

跳转方法

// 方法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)

参数获取：通过$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)
1. 路由独享的守卫
可以在路由配置上直接定义 beforeEnter 守卫
1. 组件内的守卫
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() 注册过的回调。