vue-router面试题

Posted 2023-03-24

参考技术A 路由中有三个基本的概念 route, routes, router：
1， route，它是一条路由，由这个英文单词也可以看出来，它是单数， Home按钮 => home内容， 这是一条route, about按钮 => about 内容， 这是另一条路由。
2， routes 是一组路由，把上面的每一条路由组合起来，形成一个数组。[home 按钮 =>home内容 ， about按钮 => about 内容]
3， router 是一个机制，相当于一个管理者，它来管理路由。因为routes 只是定义了一组路由，它放在哪里是静止的，当真正来了请求，怎么办？ 就是当用户点击home 按钮的时候，怎么办？这时router 就起作用了，它到routes 中去查找，去找到对应的 home 内容，所以页面中就显示了 home 内容。
4，客户端中的路由，实际上就是dom 元素的显示和隐藏。当页面中显示home 内容的时候，about 中的内容全部隐藏，反之也是一样。客户端路由有两种实现方式：基于hash 和基于html5 history api.
路由跳转等都需要vue-router

active-class是vue-router模块的router-link组件中的属性，用来做选中样式的切换；

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

vue-router 的导航钩子，主要用来作用是拦截导航，让他完成跳转或取消。
有三种方式可以植入路由导航过程中：
1.全局的
2.单个路由独享的
3组件级的

全局导航钩子主要有两种钩子：前置守卫、后置钩子，
注册一个全局前置守卫：

这三个参数 to 、from 、next 分别的作用：
1.to: Route，代表要进入的目标，它是一个路由对象
2.from: Route，代表当前正要离开的路由，同样也是一个路由对象
3.next: Function，这是一个必须需要调用的方法，而具体的执行效果则依赖 next 方法调用的参数(next函数必须调用)
1).next()：进入管道中的下一个钩子，如果全部的钩子执行完了，则导航的状态就是 confirmed（确认的）
2).next(false)：这代表中断掉当前的导航，即 to 代表的路由对象不会进入，被中断，此时该表 URL 地址会 被重置到 from 路由对应的地址
3).next(‘/’) 和 next(path: ‘/’)：在中断掉当前导航的同时，跳转到一个不同的地址
4).next(error)：如果传入参数是一个 Error 实例，那么导航被终止的同时会将错误传递给 router.onError() 注册过的回调
后置钩子注册:

没有next()函数

在路由配置上定义，其参数的使用，和全局前置守卫是一样的

组件内的导航钩子主要有这三种：beforeRouteEnter、beforeRouteUpdate、beforeRouteLeave。他们是直接在路由组件内部直接进行定义的

1、切换路由，路由参数发生了变化，但是页面数据并未及时更新，需要强制刷新后才会变化。
2、不同路由渲染相同的组件时（组件复用比销毁重新创建效率要高），在切换路由后，当前组件下的生命周期函数不会再被调用。
解决方案：
1、使用 watch 监听 $route

2、向 router-view 组件中添加 key

$route.fullPath 是完成后解析的URL，包含其查询参数信息和hash完整路径

vue-router有两种模式，hash模式和history模式
hash模式背后的原理是onhashchange事件,可以在window对象上监听这个事件.
随着history api的到来，前端路由开始进化了,前面的hashchange，你只能改变#后面的url片段，而history api则给了前端完全的自由.
通过history api，我们丢掉了丑陋的#，但是它也有个毛病：
在hash模式下，前端路由修改的是#中的信息，而浏览器请求时是不带它玩的，所以没有问题.但是在history下，你可以自由的修改path，当刷新时，如果服务器中没有相应的响应或者资源，会分分钟刷出一个404来。

vue异步组件
es提案的import()
webpack的require,ensure()
vue异步组件:

es提案的import():

webpack的require,ensure():

和方法一的区别是 使用vue的异步组件技术时一个组件生成一个js文件，webpack提供的require.ensure()，多个路由指定相同的chunkName，会合并打包成一个js文件。