当前位置：首页 > VUE

vue实现点击跳转

2026-03-07 20:20:14VUE

实现路由跳转

在Vue中实现点击跳转，通常使用Vue Router进行路由管理。安装Vue Router后，在组件中可以通过<router-link>或编程式导航实现跳转。

<template>
  <!-- 声明式导航 -->
  <router-link to="/target-path">跳转到目标页</router-link>

  <!-- 编程式导航 -->
  <button @click="navigateToTarget">跳转</button>
</template>

<script>
export default {
  methods: {
    navigateToTarget() {
      this.$router.push('/target-path'); // 跳转到指定路径
      // this.$router.push({ name: 'TargetPage' }); // 通过路由名称跳转
    }
  }
}
</script>

动态路由传参

若需传递参数，可通过动态路由或查询参数实现。

<template>
  <router-link :to="{ path: '/user', query: { id: 123 } }">带查询参数跳转</router-link>
  <router-link :to="{ name: 'User', params: { userId: 123 } }">带动态参数跳转</router-link>
</template>

<script>
export default {
  methods: {
    navigateWithParams() {
      this.$router.push({
        path: '/user',
        query: { id: 123 } // 获取方式：this.$route.query.id
      });
      // 或
      this.$router.push({
        name: 'User',
        params: { userId: 123 } // 获取方式：this.$route.params.userId
      });
    }
  }
}
</script>

路由配置示例

确保路由配置文件中已定义目标路由。

// router/index.js
import Vue from 'vue';
import Router from 'vue-router';
import TargetPage from '../views/TargetPage.vue';

Vue.use(Router);

export default new Router({
  routes: [
    {
      path: '/target-path',
      name: 'TargetPage',
      component: TargetPage
    },
    {
      path: '/user/:userId',
      name: 'User',
      component: UserPage
    }
  ]
});

跳转前校验

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

// 在组件中定义
export default {
  beforeRouteLeave(to, from, next) {
    if (confirm('确定离开当前页？')) {
      next(); // 允许跳转
    } else {
      next(false); // 取消跳转
    }
  }
}

外部链接跳转

若需跳转到外部URL，直接使用window.location或<a>标签。

vue实现点击跳转

<template>
  <a href="https://example.com" target="_blank">外部链接</a>
  <button @click="openExternal">跳转外部</button>
</template>

<script>
export default {
  methods: {
    openExternal() {
      window.location.href = 'https://example.com';
    }
  }
}
</script>