vue-router和location.href的用法区别是什么？

最新推荐文章于 2024-08-14 16:19:51 发布
最新推荐文章于 2024-08-14 16:19:51 发布
阅读量1.1k 收藏 6
点赞数
分类专栏： html5 大前端学习笔记 前端 文章标签： 前端 vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/sdasadasds/article/details/128466448
版权
前端 同时被 3 个专栏收录
119 篇文章 3 订阅
订阅专栏
html5
91 篇文章 0 订阅
订阅专栏
大前端学习笔记
70 篇文章 6 订阅
订阅专栏

vue-router和location.href的用法区别

  1. vue-router使用pushState进行路由更新，静态跳转，页面不会重新加载；
  2. location.href会触发浏览器，页面重新加载一次
  3. vue-router使用diff算法，实现按需加载，减少dom操作
  4. vue-router是路由跳转或同一个页面跳转；location.href是不同页面间跳转；
  5. vue-router是异步加载this.$nextTick(()=>{获取url})；location.href是同步加载
千锋HTML5大前端
关注
专栏目录
vue-router 的高级用法
酷爱前端的小陈博客
05-06 902
1. 路由重定向 路由重定向指的是：用户在访问地址 A 的时候，强制用户跳转到地址 C ，从而展示特定的组件页面。 通过路由规则的 redirect 属性，指定一个新的路由地址，可以很方便地设置路由的重定向： 2. 嵌套路由 通过路由实现组件的嵌套展示，叫做嵌套路由。 点击父级路由链接显示模板内容 ① 模板内容中又有子级路由链接 ② 点击子级路由链接显示子级模板内容 3.声明子路由链接和子路由占位符 在 About.vue 组件中，声明 tab1 和...
vue跳转下个页面关闭当前页面_Vue 爬坑之路（三）—— 使用 vue-router 跳转页面...
weixin_39676034的博客
12-19 7838
使用 Vue.js 做项目的时候，一个页面是由多个组件构成的，所以在跳转页面的时候，并不适合用传统的 href，于是 vue-router 应运而生。有很多朋友找我要 demo，但是博客中的这个案例被我删掉了，我只好随手写了一个超简单的 demo，希望能有所帮助链接: https://pan.baidu.com/s/1pMfi5tD 密码: pjwx这次的实例主要实现下图的效果：项目结构：一、配...
vue-router两种模式区别及使用注意事项详解
10-16
主要介绍了vue-router两种模式区别及使用注意事项,结合实例形式详细分析了vue-router两种模式hash模式与history模式的区别、用法与操作注意事项,需要的朋友可以参考下
Vue-router跳转和location.href有什么区别
qq_45780380的博客
05-17 4070
使用location.href=’/url’来跳转，简单方便，但是刷新了页面； 使用history.pushState(’/url’)，无刷新页面，静态跳转； 引进router，然后使用router.push(’/url’)来跳转，使用了diff算法，实现了按需加载，减少了dom的消耗。 其实使用router跳转和使用history.pushState()没什么差别的，因为vue-router就是用了history.pushState()，尤其是在history模式下。 ...
Vue-router 跳转和 location.href 有什么区别
最新发布
Cshaosun的博客
08-14 388
使用来跳转， 简单方便， 但是刷新了页面使用， 无刷新页面， 静态跳转；引进 router ， 然后使用 router.push( /url ) 来跳转， 使用了 diff算法， 实现了按需加载， 减少了 dom 的消耗。使用 router 跳转和使用 history.pushState() 没什么差别的， 因为 vue-router 就是用了 history.pushState() ， 尤其是在 history 模式下。
Vue 路由跳转与 location.href 的区别
My_wife_QBL的博客
07-04 557
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是同步加载 其他用法
07-vue-router详解.pdf
09-18
要使用Vue-router，首先需要通过npm来安装，然后在模块化工程中使用Vue.use()方法进行路由功能的安装和配置。安装Vue-router后，开发者可以创建路由实例，并在实例中定义路由规则，包括路径、组件以及嵌套路由、路由...
解决vue-router进行build无法正常显示路由页面的问题
08-27
在使用Element UI时，需要注意的是，在进行路由跳转时，需要使用`$router.push`方法，而不是直接使用`window.location.href`。此外，需要使用`handleSelect`方法来处理路由跳转事件。 七、总结 本文解决了Vue-...
Vue-router跳转和 location.href的区别
qq_52181663的博客
07-21 285
引进 router，然后使用 router.push( /url )来跳转，使用了 diff算法，实现了按需加载，减少了 dom的消耗。其实使用 router跳转和使用 history.pushState()没什么差别的，因为 vue-router就是用了 history.pushState()，尤其是在 history模式下。使用 history.pushState( /url )，无刷新页面，使用 location.href= /url来跳转，简单方便，但是。
通过location输入进行跳转和利用vue-router进行跳转的区别是什么？
weixin_43912756的博客
08-27 2720
参考：彻底搞懂路由跳转：location 和 history 接口 1、BOM对象 BOM（浏览器对象模型）中几个比较重要的对象：window，location,navigator window: BOM的核心对象，既是通过javascript访问浏览器窗口的一个接口，优势ECMAScript中规定的Global对象 loaction: 最有用的BOM对象之一，且比较特殊的是，locaton既是window对象的属性，也是document对象的属性，换句话说，window.location和documen
前端Vue篇之Vue-router 导航守卫有哪些、Vue-router 路由钩子在生命周期的体现、Vue-router跳转和location.href有什么区别
星辰迷上大海的博客
03-06 1725
Vue Router 中的导航守卫包括 beforeEach、beforeResolve、afterEach 和路由独享守卫 beforeEnter。这些守卫允许您在路由切换前、解析完成后和路由切换后执行自定义逻辑，比如权限验证、全局加载状态等。
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/' ...
location.href的几种用法
wunianisme的博客
09-26 2万+
location.href 在js中，location.href经常用于页面跳转。它主要有如下几种用法： 1.在当前页面打开URL页面。需要注意的是window.location.href=window.location.href与window.location.reload()都是刷新当前页面，但是如果页面上有提交数据的时候，window.location.reload()会提示是否提交。 se...
vue路由切换和用location切换url的区别
weixin_30512089的博客
05-21 4482
最近的业务涉及到了axios的拦截器，要在request.js里面要根据状态码来跳转页面，这时候我就面对了几种跳转选择： 1、使用location.href='/url'来跳转，简单方便，但是刷新了页面。 2、使用history.pushState('/url')，无刷新页面，静态跳转。 3、引进router，然后使用router.push('/url')来跳转，使用了diff算法，实现了按...
vue使用window.location.href 跳转失败
qq_43654065的博客
09-14 2706
vue项目中直接使用window.lcocation.href跳转外链，但是跳转的链接会被拼接成这样。
vue路由跳转页面的几种方式及其区别
柏悦的博客
10-13 1127
1.query可以用name和path匹配路由，通过this.$route.query.id获取参数，刷新浏览器参数不会丢失2.params只能用name匹配路由，通过path匹配路由获取不到参数，对应的路由配置path:‘/home/:id’或者path:‘home:id’，否则刷新浏览器参数丢失3.直接通过url传参，push({path: ‘/home/123’})或者push(’/home/123’)，对应的路由配置path:‘/home/:id’，刷新浏览器参数不会丢失。
vue中window.location.href能生效吗？
03-21
在Vue中，使用`window.location.href`可以改变当前页面的URL地址，从而实现页面的跳转。但需要注意的是，Vue是一个单页面应用（SPA）框架，它通过路由（router）来管理页面的跳转。因此，在Vue中直接使用`window.location.href`会绕过Vue的路由机制，导致页面的刷新和重新加载，可能会破坏Vue应用的状态管理。 如果你想在Vue中进行页面跳转，推荐使用Vue Router提供的编程式导航方式。通过调用`this.$router.push()`方法，可以实现页面的跳转，并且保持Vue应用的状态管理。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值