vue 如何实现跳页
Vue 实现跳页的方法
在 Vue 中实现跳页通常涉及路由跳转或页面重定向，以下是几种常见的方法：
使用 vue-router 进行路由跳转
通过 Vue 官方路由库 vue-router 实现页面跳转是最常见的方式。确保项目已安装并配置了 vue-router。
// 在组件中使用 router.push 方法跳转
this.$router.push('/target-page');
// 带参数跳转
this.$router.push({ path: '/target-page', query: { id: 123 } });
// 命名路由跳转
this.$router.push({ name: 'TargetPage', params: { userId: 456 } });使用 <router-link> 组件
在模板中直接使用 <router-link> 实现跳转，适合静态导航。
<router-link to="/target-page">跳转到目标页</router-link>
<!-- 带参数 -->
<router-link :to="{ path: '/target-page', query: { id: 123 } }">跳转</router-link>重定向到外部链接
如果需要跳转到外部 URL，可以使用 window.location 或 <a> 标签。
// 通过 JavaScript 跳转
window.location.href = 'https://example.com';<!-- 通过模板跳转 -->
<a href="https://example.com" target="_blank">跳转到外部链接</a>动态路由跳转
根据条件动态跳转到不同页面，适合权限控制或逻辑判断。
if (user.isAdmin) {
this.$router.push('/admin');
} else {
this.$router.push('/user');
}替换当前路由
使用 router.replace 替换当前路由，不保留历史记录。
this.$router.replace('/target-page');以上方法涵盖了 Vue 中常见的跳页需求，根据实际场景选择合适的方式即可。
