Vue 中路由跳转和 location.href 的区别？

在 Vue 中，路由跳转和 location.href 是实现页面跳转的两种不同方式，具有一些区别：

路由跳转（Vue Router）：

1. Vue Router： Vue 应用通常使用 Vue Router 来管理路由。
2. 通过编程方式控制： 使用 Vue Router 提供的编程式导航方法，例如 router.push()、router.replace() 等，来进行页面之间的切换。
3. SPA（单页应用）优势： 路由跳转适用于单页应用（SPA），可以实现无刷新的页面切换，并允许在不同的路由之间保持应用状态。

示例：

// 使用 router.push 进行路由跳转
this.router.push('/new-page'); // 或者使用命名路由：this.router.push({ name: 'NewPage' });

location.href：

1. 浏览器原生属性： location 对象表示当前加载页面的 URL，并且 location.href 是一个字符串，可以设置或获取当前页面的 URL。
2. 页面的完全重新加载： 使用 location.href 进行页面跳转会导致整个页面重新加载，类似于用户点击链接或在地址栏中输入 URL。

示例：

// 通过修改 location.href 进行页面跳转
location.href = '/new-page'; // 或者设置完整的 URL：location.href = 'https://example.com/new-page';

区别总结：

• 路由跳转是 Vue 单页应用中实现页面切换的方式，不会导致整个页面的重新加载，利用 Vue Router 提供的方法进行控制。
• location.href 是浏览器原生属性，直接操作会导致整个页面的重新加载，适用于需要完全重新加载页面的情况，但不适合单页应用内部的页面切换。