当前位置：首页 > VUE

用vue实现页面跳转

2026-02-21 13:11:15VUE

Vue 实现页面跳转的方法

在 Vue 中实现页面跳转通常可以通过 Vue Router 完成。以下是几种常见的实现方式：

安装 Vue Router 确保项目已安装 Vue Router。若未安装，可通过以下命令安装：

npm install vue-router

配置路由 在 src/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> 实现跳转：

<router-link to="/">Home</router-link>
<router-link to="/about">About</router-link>

编程式导航 通过 router.push 方法在 JavaScript 中跳转：

用vue实现页面跳转

// 在组件方法中调用
this.$router.push('/about');

// 使用路由名称（需配置路由时添加 name 属性）
this.$router.push({ name: 'About' });

// 带参数跳转
this.$router.push({ path: '/user', query: { id: 123 } });

动态路由匹配 配置动态路由参数：

{ path: '/user/:id', component: User }

跳转时传递参数：

this.$router.push('/user/123');

在目标组件中通过 $route.params.id 获取参数。

用vue实现页面跳转

路由传参的其他方式 通过 props 解耦路由参数：

{ path: '/user/:id', component: User, props: true }

在目标组件中通过 props 接收：

props: ['id']

导航守卫 在路由跳转前进行权限控制：

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

注意事项

确保路由组件已正确导入并注册。
编程式导航需注意 this 上下文，在 setup 中需通过 useRouter 获取路由实例：
```
import { useRouter } from 'vue-router';
const router = useRouter();
router.push('/path');
```
动态路由参数变化时，组件不会重新渲染，需通过 watch 监听 $route 变化。

通过以上方法，可以灵活实现 Vue 应用中的页面跳转功能。