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();
}
});
