在vue实现路由跳转

Vue 实现路由跳转的方法

在 Vue 中实现路由跳转通常使用 Vue Router，以下是几种常见的实现方式：

声明式导航（模板中使用 <router-link>）

在模板中直接使用 <router-link> 组件实现跳转，适合静态路由跳转。

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

可以添加动态参数：

<router-link :to="{ name: 'user', params: { userId: 123 }}">用户页面</router-link>

编程式导航（通过代码跳转）

在 JavaScript 代码中使用 this.$router.push 或 this.$router.replace 实现跳转。

跳转到指定路径：

this.$router.push('/home');

跳转到命名路由并传递参数：

this.$router.push({ name: 'user', params: { userId: 123 } });

替换当前路由（不保留历史记录）：

this.$router.replace('/login');

路由传参

可以通过 params 或 query 传递参数。

使用 params（需在路由配置中定义）：

this.$router.push({ name: 'user', params: { userId: 123 } });

使用 query（URL 中显示参数）：

this.$router.push({ path: '/user', query: { userId: 123 } });

动态路由匹配

在路由配置中定义动态参数：

const routes = [
  { path: '/user/:userId', component: User }
];

在组件中通过 this.$route.params 获取参数：

const userId = this.$route.params.userId;

导航守卫

可以在跳转前后执行逻辑，例如权限验证。

全局前置守卫：

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

组件内守卫：

beforeRouteEnter(to, from, next) {
  next(vm => {
    // 访问组件实例 `vm`
  });
}

路由懒加载

通过动态导入提升性能：

const User = () => import('./views/User.vue');
const routes = [
  { path: '/user', component: User }
];

以上方法涵盖了 Vue 中路由跳转的主要场景，可以根据实际需求选择合适的方式。