Vue 2&3进阶面试题：（第五天）
目录
17.keep-alive
keep-alive 是 Vue 的内置组件，当它包裹动态组件时，会缓存不活动的组件实例，而不是销毁它们。keep-alive 是一个抽象组件：它自身不会渲染成一个 DOM 元素，也不会出现在父组件链中。
在组件切换过程中 把切换出去的组件保留在内存中，防止重复渲染DOM，减少加载时间及性能消耗，提高用户体验性
被包含在keep-alive 中创建的组件，会多出两个生命周期的钩子: activated（组件激活时使用） 与deactivated（组件离开时调用）
如果需要缓存整个项目，直接在app.vue中用keep-alive包裹router-view即可。要缓存部分页面，需要在路由地址配置中，在meta属性中添加一个状态，在app.vue中判断一下包裹的router-view即可
例如有一个商品页面和一个详情页面，这样在两个页面切换的时候就可以用到keep-alive,在切换到详情的时候，把状态保留在内存中，而不是销毁,从而提高一个性能的优化
18.$router和$route的区别
可以在任何组件内通过this.$router访问路由器，也可以通过this.$route访问当前路由
可以理解为：
this.$router相当于一个全局的路有对象，包含了很多属性和对象（比如history对象），任何页面都可以调用其push()、replace()、go()等方法
this.$route表示当前路由对象，每一个路由都会有一个route对象，是一个局部的对象，可以获取对应的name、path、params、query等属性。
简单来说：
$router:是路由操作对象，只写对象
$route:是路由信息对象，只读对象
19.vue-router路由模式有几种？
vue-router 主要使用的有2种路由模式：hash和history
其中，
- hash: 使用 URL 的 hash 来模拟一个完整的 URL，于是当 URL 改变时，页面不会重新加载，其显示的网路路径中会有 “#” 号。这是最安全的模式，因为他兼容所有的浏览器和服务器。
- history : 会去掉路径中的 “#”,依赖于Html5 的history，pushState API,但是history也是有缺点的，不怕前进后退跳转，就怕刷新（如果后端没有准备的话），因为刷新是去请求服务器了,所以需要后台配置来配合history的模式使用.
1.原理不同：
hash模式的实现原理是通过监听hashChange事件来实现的。history模式是通过调用history.pushState方法(或者replaceState) 并且监听popstate事件来实现的。history.pushState会追加历史记录，并更换地址栏地址信息，但是页面不会刷新，需要手动调用地址变化之后的处理函数，并在处理函数内部决定跳转逻辑;监听popstate事件是为了响应浏览器的前进后退功能；
2.表现不同：
hash模式会在地址栏中有#号，而history模式没有；同时由于historv模式的实现原理用到H5的新特性，所以它对浏览器的兼容性有要求(IE >= 10)；
3.history模式特点：
history模式开发的SPA项目，需要服务器端做额外的配置，否则会出现刷新白屏(链接分享失效)。原因是页面刷新时，浏览器会向服务器真的发出对这个地址的请求，而这个文件资源又不存在，所以就报404。外理方式就由后端做一个保底映射:所有的请求全部拦截到index.html上。
20.vue的路由传参param和query的区别
- 声明式导航中:
例如:
/data/:id这个路由匹配/data/1,这里的 id 使用 params
/data?id=1 这里的 id 使用 query
- 当你使用params方法传参的时候，要在路由后面加参数名，并且传参的时候，参数名要跟路由后面设置的参数名对应。
- 使用query方法，就没有这种限制，直接在跳转里面用就可以。
注意点:
对于声明式导航来说,params是路由的一部分，必须在路由后面添加参数名。query是拼接在url后面的参数。没有也没关系。params一旦设置路由，params就是路由的一部分，如果这个路由有params传参，但是在跳转的时候没有传这个参数，会导致跳转失败或者页面会没有内容。
- 对于编程式导航来说,params要和路由的name匹配使用,使用params接受参数,query使用name和path都可以,使用query来接受参数
原文地址：https://blog.csdn.net/m0_71805303/article/details/142369140
免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！