vue中有方法可以实现window.location.href页面跳转

在Vue中可以使用$router.push()方法实现页面跳转，该方法会将目标路由添加到路由历史记录中，从而实现页面跳转。具体使用方法如下：
// 在Vue组件中使用$router.push()方法实现页面跳转
this.$router.push('/targetPage')
登录后复制
其中，/targetPage是目标页面的路由路径。如果需要在跳转时传递参数，可以在路由路径中添加参数，例如：
// 在Vue组件中使用$router.push()方法实现页面跳转并传递参数
this.$router.push('/targetPage?id=123')
登录后复制
在目标页面中可以通过this.$route.query.id获取传递的参数值。

相关问题

vue router如何实现window.location.href

Vue Router可以通过使用router.push方法来实现类似于window.location.href的跳转功能。具体实现方法如下：
// 在Vue组件中使用
this.$router.push('/your/path')

// 在JS代码中使用
import router from './router' // 引入Vue Router实例
router.push('/your/path')
登录后复制
其中，/your/path是你要跳转的路径。与window.location.href不同的是，使用Vue Router进行跳转时，页面不会重新加载，而是通过异步加载和按需加载的方式进行页面更新，从而提高了页面的性能和用户体验。

vue window.location.href 与 window.location.replace 跳转速度

测试 window.location.href 和 window.location.replace 跳转速度
在 JavaScript 中，window.location.href 和 window.location.replace 都可以用于页面重定向。然而，在性能方面两者存在细微差异。
使用 window.location.href
设置 window.location.href 实际上会在浏览器历史记录中创建一个新的条目[^1]：
// 设置新的 URL 并添加到浏览历史
window.location.href = "https://example.com";
登录后复制
这会使得用户可以通过点击返回按钮回到之前的页面。
使用 window.location.replace
相比之下，调用 window.location.replace 不会在浏览器的历史栈中增加新纪录，因此不会留下可回退的导航项：
// 替换当前页面而不保存旧位置
window.location.replace("https://example.com");
登录后复制
由于不需要更新历史状态，理论上 replace() 方法可能稍微快一些，因为它减少了内存占用以及处理时间。
为了验证这一点，下面是一个简单的测试脚本，可以在 Vue 组件内执行来测量两种方法之间的实际耗时差異:
<template>
<div id="app">
<button @click="testHref">Test href</button>
<button @click="testReplace">Test replace</button>
</div>
</template>

<script>
export default {
name: 'App',
methods: {
testHref() {
const start = performance.now();
window.location.href = '/target'; // 这里应替换为目标URL
console.log(`href took ${performance.now() - start} ms`);
},
testReplace() {
const start = performance.now();
window.location.replace('/target'); // 同样需指定目标地址
console.log(`replace took ${performance.now() - start} ms`);
}
}
}
</script>
登录后复制
需要注意的是，上述代码中的日志语句实际上无法被执行完成，因为一旦触发了页面跳转会立即终止现有页面上的所有操作。要获得更精确的结果建议采用其他手段比如外部工具来进行对比分析。