【面试题系列Vue02】Vue Router 路由都有哪些模式?各模式之间有什么区别?

官方解析

Vue Router 路由有三种模式:

  1. hash 模式:使⽤ URL 中的 hash(即 # 后面的内容)来作为路由路径。
    在这种模式下,页面不会重新加载,只会更新 hash 值,并触发路由变化,从而渲染对应的组件。
  2. history 模式:使⽤ HTML5 中新增的 History API 来管理浏览历史记录,从而实现页面的前进和后退。
    在这种模式下,URL 中不会带有 # 号,而是使用真实的 URL 路径来作为路由路径。
  3. abstract 模式:在不需要基于浏览器的 API 时,可以使用这种模式。
    在这种模式下,路由器并不会监听 URL 变化,而是通过调用 router.replace 或 router.push 来进行导航。

区别:

  1. hash 模式可以兼容较⽼的浏览器,但 URL 中会带有 # 号。
  2. history 模式无需带有 # 号,更加美观,但需要后端⽀持,否则刷新页面会导致 404 错误。
  3. abstract 模式主要用于⼀些特定场景,例如在使⽤ Node.js 时,可以使用 abstract 模式来构建路由。
    ⼀般来说,如果需要⽀持较⽼的浏览器,或者不需要后端⽀持,可以使用 hash 模式;
    否则建议使用 history 模式。

一个总结

Vue Router 路由有三种模式:hash 模式、history 模式和 abstract 模式。
在这里插入图片描述
⼀般情况下,我们建议使用 history 模式,因为它对 SEO 更加友好、URL 更加规范,并且随着 HTML5 技术的普及,浏览器兼容性也不再是问题。
但是在特定场景下,如需要⽀持 IE9 及以下浏览器,或者不方便进行服务端配置时,可以选择使用 hash 模式。
而 abstract 模式则适⽤于⼀些特殊的场景,如⾮浏览器环境下的应⽤程序或者只需要使⽤编程式导航的情况。

忙里抽空更新一下~

### 关于 Vue Router面试题整理 #### 动态路由的定义与参数获取 Vue Router 支持动态路径参数,允许匹配带有占位符的部分 URL。这些占位符可以用于捕获用户输入或其他变量作为路由的一部分。 为了创建动态路由,在配置文件中的 `path` 字段里加入冒号前缀的参数名即可[^1]: ```javascript const routes = [ { path: '/user/:id', component: User } ]; ``` 当访问 `/user/123` 这样的链接时,`:id` 就会被解析成实际传递给组件的数据——即这里的 "123"。要读取这个值可以在组件内部通过 `$route.params.id` 来获得它[^2]。 另外,如果想要监听并响应路由变化(比如页面刷新后),可以通过侦听器实现: ```javascript watch: { '$route.params': function (newVal) { console.log('Params changed:', newVal); } } ``` #### 获取当前路由信息的方法 在任何地方都可以利用 `this.$route` 对象来取得有关当前激活状态的信息,包括但不限于名称 (`name`)、路径 (`path`) 和查询字符串 (`query`) 等属性[^4]: - **Params**: 参数对象; 例如,假设有一个带参的 URL 如下所示:`http://example.com/user?id=1&type=admin` ,那么就可以这样提取数据: ```javascript console.log(this.$route.query); // 输出 { id: '1', type: 'admin' } ``` #### 导航守卫的应用场景 导航守卫提供了多种方式去控制何时何地执行某些逻辑操作,如权限验证或加载指示器显示等。全局前置钩子会在每次切换之前触发一次,而局部进入离开则仅限特定组件内有效[^3]。 ```javascript // 全局前置守卫 router.beforeEach((to, from, next) => { // 执行一些处理... }); // 组件内的守卫 export default { beforeRouteEnter(to, from, next){ // 此处无法直接访问 this next(vm => { vm.fetchData(); }); }, }; ```
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值