vue3实现跳转

Vue3 实现页面跳转的方法

Vue3 提供了多种方式实现页面跳转，包括使用 router-link、编程式导航以及路由传参等。以下是具体实现方法：

使用 router-link 组件

router-link 是 Vue Router 提供的组件，用于声明式导航。在模板中直接使用即可跳转到指定路由。

<router-link to="/home">跳转到首页</router-link>

如果需要动态传递参数，可以通过对象形式定义路由：

<router-link :to="{ path: '/user', query: { id: 123 } }">跳转到用户页</router-link>

编程式导航

通过调用 router.push 或 router.replace 方法实现跳转。push 会保留历史记录，replace 则替换当前记录。

import { useRouter } from 'vue-router';

const router = useRouter();

// 跳转到指定路径
router.push('/home');

// 跳转并传递查询参数
router.push({ path: '/user', query: { id: 123 } });

// 跳转并传递命名路由
router.push({ name: 'user', params: { id: 456 } });

路由传参

可以通过 params 或 query 传递参数。params 适用于命名路由，query 适用于路径路由。

// 传递 params
router.push({ name: 'user', params: { id: 789 } });

// 传递 query
router.push({ path: '/profile', query: { name: 'John' } });

动态路由跳转

如果路由配置了动态参数（如 /user/:id），可以通过 params 传递动态值。

router.push({ name: 'user', params: { id: 101 } });

跳转后获取参数

在目标页面中，可以通过 useRoute 获取传递的参数。

import { useRoute } from 'vue-router';

const route = useRoute();
console.log(route.params.id); // 输出动态参数
console.log(route.query.name); // 输出查询参数

跳转前拦截

可以通过路由守卫（如 beforeEach）在跳转前进行拦截或验证。

router.beforeEach((to, from, next) => {
  if (to.path === '/admin' && !isAuthenticated) {
    next('/login');
  } else {
    next();
  }
});

总结

Vue3 中实现跳转的常用方法包括：

• 使用 router-link 实现声明式导航。
• 通过 router.push 或 router.replace 实现编程式导航。
• 通过 params 或 query 传递参数。
• 结合路由守卫控制跳转逻辑。