资源之前端模拟面试题
根据给定的文件信息,以下是对相关知识点的详细解析: ### Vue-router中 $route 和 $router 的区别 #### 1. $route - **定义**:$route 是一个用于获取当前路由信息的对象。它提供了访问当前路由状态的方法,这对于前端开发者来说是非常有用的。 - **用途详解**: - **$route.path**:表示当前路由对象的路径,并被解析为绝对路径。例如,如果当前路径是 `/shops/goods`,那么 `$route.path` 的值即为 `/shops/goods`。 - **$route.params**:这是一个对象,包含了路由中动态片段和全匹配片段的键值对。例如,如果你的路由定义中有动态参数,如 `/user/:id`,并且访问路径为 `/user/123`,那么 `$route.params.id` 的值将会是 `123`。 - **$route.query**:这是一个对象,包含了路由中查询参数的键值对。例如,对于路径 `/home/news/detail/01?favorite=yes`,则 `$route.query.favorite` 的值将是 `'yes'`。 - **$route.router**:这是当前路由规则所属的路由器实例,包括了相关的组件等信息。 - **$route.matched**:一个数组,包含了当前匹配的路径中所包含的所有片段所对应的配置参数对象。 - **$route.name**:当前路径的名字。如果使用了具名路由,则该属性返回名称;否则为空。 #### 2. $router - **定义**:$router 是一个提供路由跳转功能的对象,它主要用于导航目的。 - **示例**:`$router.go(-1)` 表示从当前页面跳转到前一个页面。 ### Vue-router中 hash 模式和 history 模式的区别 #### 1. Hash 模式 - **URL 显示**:hash 模式的 URL 通常包含 `#` 符号,例如 `example.com/#/page`。 - **刷新行为**:在 hash 模式下,即使刷新页面也能正常加载到对应的页面。 - **兼容性**:hash 模式支持低版本浏览器和 IE 浏览器。 - **原理**:hash 模式利用了浏览器的 `onhashchange` 事件,这意味着当 URL 中的 hash 值改变时,前端可以监听到这一变化并作出相应的响应,而无需重新加载整个页面。这种方式使得前端可以按需加载页面内容,提高了用户体验。 #### 2. History 模式 - **URL 显示**:history 模式的 URL 不包含 `#` 符号,看起来更符合常规的 URL 结构,例如 `example.com/page`。 - **刷新行为**:在 history 模式下,刷新页面可能会导致 404 错误,因为服务器实际上并没有这个路径下的资源。 - **兼容性**:history 模式使用 HTML5 的 History API,不支持低版本浏览器。 - **原理**:history 模式利用了 HTML5 的 `pushState` 和 `replaceState` 方法来修改浏览器的历史记录,这样就可以改变 URL 而不发送新的请求。但是,由于服务器实际上没有对应的资源,因此需要配置服务器来将所有的请求重定向到入口文件(通常是 index.html)。 ### 总结 - **选择模式**:通常情况下,开发人员会选择 hash 模式,因为它提供了良好的向后兼容性并且易于设置。然而,如果应用程序需要更美观的 URL 或者更好的 SEO 效果,可以选择 history 模式,并确保服务器端正确配置以避免 404 错误。 - **路由管理**:无论是 hash 模式还是 history 模式,Vue-router 都提供了一套完整的 API 来管理路由和导航。开发者可以根据实际需求选择合适的模式,并利用 `$route` 和 `$router` 对象来控制路由行为。