vue怎么实现跳转
Vue 实现页面跳转的方法
使用 router-link 组件
router-link 是 Vue Router 提供的组件，用于声明式导航。通过 to 属性指定目标路由路径或命名路由。
<router-link to="/about">跳转到关于页面</router-link>
<router-link :to="{ name: 'user', params: { userId: 123 }}">用户页面</router-link>编程式导航
通过 this.$router.push 或 this.$router.replace 方法实现跳转，通常在方法或生命周期钩子中调用。
// 路径跳转
this.$router.push('/about');
// 命名路由跳转
this.$router.push({ name: 'user', params: { userId: 123 } });
// 带查询参数跳转
this.$router.push({ path: '/user', query: { id: 1 } });
// 替换当前路由（无历史记录）
this.$router.replace('/login');路由重定向
在路由配置中使用 redirect 字段实现自动跳转。
const routes = [
{ path: '/', redirect: '/home' },
{ path: '/home', component: Home }
];动态路由跳转
通过参数动态匹配路由，适用于需要传递参数的场景。
// 路由配置
const routes = [
{ path: '/user/:id', component: User }
];
// 跳转时传递参数
this.$router.push('/user/123');导航守卫控制跳转
使用路由守卫在跳转前后执行逻辑，例如权限验证。
router.beforeEach((to, from, next) => {
if (to.meta.requiresAuth && !isAuthenticated) {
next('/login');
} else {
next();
}
});新窗口打开页面
通过 router.resolve 生成完整 URL，配合 window.open 实现。
const route = this.$router.resolve({ path: '/external' });
window.open(route.href, '_blank');注意事项
- 确保已安装并配置 Vue Router，在入口文件中注入路由实例。
- 编程式导航的路径需与路由配置中的路径或命名路由匹配。
- 动态路由参数需通过
this.$route.params在目标组件中获取。 - 导航守卫需避免死循环逻辑，例如未登录时无限重定向到登录页。
