32. Vue-router跳转和location.href有什么区别

最新推荐文章于 2024-08-14 16:19:51 发布
最新推荐文章于 2024-08-14 16:19:51 发布
阅读量443 收藏 11
点赞数 7
分类专栏： 前端面试Vue篇 文章标签： vue.js 前端 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_74217055/article/details/136634587
版权
本文探讨了在JavaScript中，如何通过`location.href`进行页面刷新跳转与`history.pushState()`进行无刷新静态跳转的区别，重点介绍了VueRouter如何利用`pushState`和`diff`算法实现按需加载，减少DOM资源消耗。实际上，在VueRouter中，两者在history模式下作用相同。
摘要由CSDN通过智能技术生成
  • 使用 location.href= /url 来跳转，简单方便，但是刷新了页面；
  • 使用 history.pushState( /url ) ，无刷新页面，静态跳转；
  • 引进 router ，然后使用 router.push( /url ) 来跳转，使用了 diff 算法，实现了按需加载，减少了 dom 的消耗。其实使用 router 跳转和使用 history.pushState() 没什么差别的，因为vue-router就是用了 history.pushState() ，尤其是在history模式下。
叫我阿东就行
关注
  • 7
    点赞
  • 踩
  • 11
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Python全栈（六）项目前导之11.Vue-Router的使用
CUFEECR的博客
04-06 2694
在路由规则中，可以用*匹配404页面错误，可以匹配两类错误（地址错误和参数错误）。如果在一个路由视图下还有不同的视图，需要用到嵌套路由，在children属性中添加，并构建对应的link和view。如果需要用JS修改页面跳转，需要用到编程式导航，即push方法，还可以用go(n)在记录中前进或者后退指定步数，通过push传参时有两种形式，对应有不同的传递方式。在routes配置中给某个路由设置名称；想要同时展示多个视图可以在组件定义时实现映射。重定向通过redirect完成，还可以给重定向的路由命别名。
vue-router 2.0 跳转之router.push()用法说明
10-14
Vue Router 是 Vue.js 应用中的官方路由管理库，它提供了强大的导航控制功能。在 Vue Router 2.0 版本中，`router.push()` 是一个核心方法，用于程序化地导航到新的 URL。这个方法使得开发者能够在运行时动态改变...
Vue-router跳转和location.href有什么区别
qq_45780380的博客
05-17 4062
使用location.href=’/url’来跳转，简单方便，但是刷新了页面； 使用history.pushState(’/url’)，无刷新页面，静态跳转； 引进router，然后使用router.push(’/url’)来跳转，使用了diff算法，实现了按需加载，减少了dom的消耗。 其实使用router跳转和使用history.pushState()没什么差别的，因为vue-router就是用了history.pushState()，尤其是在history模式下。 ...
Vue 路由跳转与 location.href 的区别
My_wife_QBL的博客
07-04 511
Vue 路由跳转：使用 Vue Router 进行路由跳转，可以实现前端路由管理，不会重新加载整个页面，适用于单页应用程序。：通过设置进行页面跳转，会重新加载整个页面，适用于传统的多页应用程序。Vue 路由跳转和是两种不同的页面跳转方式。Vue 路由跳转适用于单页应用程序，提供了丰富的功能和更好的性能，而适用于传统的多页应用程序，功能相对简单。通过合理选择和使用这两种方式，我们可以构建出结构清晰、功能丰富的 Web 应用程序。希望本文能够帮助你全面理解 Vue 路由跳转和。
vue-router与location.href的用法区别
热门推荐
qq_43258500的博客
05-25 2万+
vue-router与location.href的用法区别 ①vue-router使用pushState进行路由更新，静态跳转，页面不会重新加载；location.href会触发浏览器，页面重新加载一次 ②vue-router使用diff算法，实现按需加载，减少dom操作 ③vue-router是路由跳转或同一个页面跳转；location.href是不同页面间跳转； ④vue-router是异步加载this.$nextTick(()=>{获取url})；location.href是同步加载 其他用法
vue----router.go/push&location.href
python_web全栈
02-07 3901
0. router.go/push介绍： 一句话，用来进行路径跳转的 1. 使用 router.go// 回到上一页首页 this.$router.go(-1) // 回到上一页首页 router.push // 普通的界面跳转(一般用于项目内的路径跳转) this.$router.push('/') location.href // 普通的路径跳转(一般用于项目外的路径跳转) location.href = 'https://element.eleme.cn/' ...
push和location.href的区别
qq_60500795的博客
09-13 383
location.href是全部刷新，这样上面固定的位置也会刷新。push是局部刷新，最上面和最下面如果是固定的无法刷新，limit设置上传文件数量。action设置上传地址。
Vue-router跳转和location.href有什么区别？
06-08
Vue-router是Vue.js的官方路由插件，它基于Vue.js的生命周期和组件系统，实现了客户端路由的跳转。而location.href则是原生JavaScript的跳转方式。 它们的主要区别在于： 1. Vue-router实现了SPA（Single Page ...
解决vue-router进行build无法正常显示路由页面的问题
08-27
const router = new VueRouter({ mode: 'hash', base: __dirname, routes: [ { path: '/first', component: firstCom } ] }) ``` 五、注意事项 在使用Vue-Router时，开发者需要注意的是，在进行Build时，需要...
Vue-Router详解
凉茶铺的博客
01-24 8122
介绍了Vue-Router的相关知识点
vue-router和location.href的用法区别是什么？
sdasadasds的博客
12-28 1140
vue-router和location.href的用法区别。
路由:编程式导航跳转-push,replace,go
薛定谔的猫
01-14 631
在实际开发中，一般只会前进和后退一层页面。方法，可以跳转到指定的 hash 地址，从而展示对应的组件页面。方法，可以跳转到指定的 hash 地址，从而展示对应的组件页面。在行内使用编程式导航跳转的时候，this必须要省略，否则会报错。方法，可以在浏览历史中前进和后退。跳转到新页面的方式，属于编程式导航。跳转到指定的 hash 地址，并。跳转到指定 hash 地址，并。接、vue 项目中点击。('hash 地址')('hash 地址')实现导航历史前进、后退。实现导航的方式，叫做。实现导航的方式，叫做。
项目总结关于location.replace和location.href的区别
时清云的博客
11-21 3160
window.location.replace和window.location.href都可以实现页面的跳转，但是它们是有区别的，具体区别如下： 假如有三个页面a b c 按照页面的跳转顺序是 a => b => c b => c在从页面b跳转到页面c时，如果是通过window.location.href(".../c") 此时b页面的路径会被c页面代替，但是点...
前端Vue篇之Vue-router 导航守卫有哪些、Vue-router 路由钩子在生命周期的体现、Vue-router跳转和location.href有什么区别
星辰迷上大海的博客
03-06 1703
Vue Router 中的导航守卫包括 beforeEach、beforeResolve、afterEach 和路由独享守卫 beforeEnter。这些守卫允许您在路由切换前、解析完成后和路由切换后执行自定义逻辑，比如权限验证、全局加载状态等。
Vue-router 跳转和 location.href 有什么区别
最新发布
Cshaosun的博客
08-14 363
使用来跳转， 简单方便， 但是刷新了页面使用， 无刷新页面， 静态跳转；引进 router ， 然后使用 router.push( /url ) 来跳转， 使用了 diff算法， 实现了按需加载， 减少了 dom 的消耗。使用 router 跳转和使用 history.pushState() 没什么差别的， 因为 vue-router 就是用了 history.pushState() ， 尤其是在 history 模式下。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值