用vue实现页面跳转
路由配置
在Vue项目中，页面跳转通常通过Vue Router实现。需要先安装并配置路由。在router/index.js中定义路由规则：
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-link>组件实现跳转，适合导航菜单等场景：
<template>
<router-link to="/">Home</router-link>
<router-link to="/about">About</router-link>
</template>编程式导航
通过router.push()方法在JavaScript中控制跳转，适合按钮点击等交互场景：
methods: {
goToAbout() {
this.$router.push('/about');
}
}动态路由
需要传递参数时，可通过动态路由实现。路由配置中添加参数占位符：
{ path: '/user/:id', component: User }跳转时传递参数：
this.$router.push('/user/123');在目标组件中通过$route.params获取参数：
this.$route.params.id // 输出123命名路由
为路由定义名称可提高可维护性：
{ path: '/user/:id', name: 'user', component: User }跳转时使用名称：
this.$router.push({ name: 'user', params: { id: 123 } });路由守卫
通过路由守卫控制跳转权限，例如全局前置守卫：
router.beforeEach((to, from, next) => {
if (to.meta.requiresAuth && !isAuthenticated) {
next('/login');
} else {
next();
}
});路由模式
根据项目需求选择路由模式：
createWebHistory: 需要服务器支持createWebHashHistory: 带#的URL，兼容性好
const router = createRouter({
history: createWebHashHistory(),
routes
});
