vue实现按钮跳转页面

路由配置

在Vue项目中实现按钮跳转页面，需要先配置路由。通常在router/index.js文件中定义路由规则。确保已安装vue-router。

import { createRouter, createWebHistory } from 'vue-router';
import Home from '../views/Home.vue';
import About from '../views/About.vue';

const routes = [
  { path: '/', component: Home },
  { path: '/about', component: About }
];

const router = createRouter({
  history: createWebHistory(),
  routes
});

export default router;

编程式导航

通过router.push方法实现按钮跳转。在Vue组件中，可以通过useRouter钩子获取路由实例。

<template>
  <button @click="goToAbout">跳转到About页</button>
</template>

<script setup>
import { useRouter } from 'vue-router';

const router = useRouter();
const goToAbout = () => {
  router.push('/about');
};
</script>

声明式导航

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

<template>
  <router-link to="/about">
    <button>跳转到About页</button>
  </router-link>
</template>

传递参数

跳转时可以通过路由参数或查询参数传递数据。

// 编程式导航传参
router.push({ path: '/about', query: { id: 123 } });

// 声明式导航传参
<router-link :to="{ path: '/about', query: { id: 123 } }">
  <button>带参数跳转</button>
</router-link>

接收参数

在目标页面通过useRoute钩子获取传递的参数。

<template>
  <div>接收的参数: {{ route.query.id }}</div>
</template>

<script setup>
import { useRoute } from 'vue-router';
const route = useRoute();
</script>

动态路由

配置动态路由匹配，适合需要根据ID跳转的场景。

// router/index.js
{ path: '/user/:id', component: User }

// 跳转时传递动态参数
router.push('/user/123');

// 目标页面获取动态参数
const route = useRoute();
console.log(route.params.id); // 输出123

路由守卫

如果需要权限控制，可以在全局或局部使用路由守卫。

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