vue 实现页面跳转
Vue 实现页面跳转的方法
Vue 中实现页面跳转主要通过 vue-router 进行路由管理，以下是几种常见的实现方式：
声明式导航（模板中使用 <router-link>）
在模板中使用 <router-link> 组件实现跳转，适合在 HTML 结构中直接使用：
<router-link to="/home">跳转到首页</router-link>通过 :to 可以绑定动态路径：
<router-link :to="{ path: '/user', query: { id: 123 } }">用户详情</router-link>编程式导航（通过 router.push）
在 JavaScript 代码中通过 this.$router.push 实现跳转：
// 跳转到指定路径
this.$router.push('/home');
// 跳转并传递参数（query 或 params）
this.$router.push({ path: '/user', query: { id: 123 } });
this.$router.push({ name: 'user', params: { id: 123 } });替换当前路由（router.replace）
与 push 类似，但不会在历史记录中留下痕迹：
this.$router.replace('/home');重定向（router.go）
通过历史记录前进或后退：
this.$router.go(-1); // 返回上一页
this.$router.go(1); // 前进一页路由配置示例
在 router/index.js 中定义路由：
const routes = [
{ path: '/home', component: Home },
{ path: '/user/:id', component: User }
];动态路由参数获取
在目标页面组件中通过 this.$route 获取参数：
// 获取 query 参数
const id = this.$route.query.id;
// 获取 params 参数
const id = this.$route.params.id;导航守卫控制跳转
通过路由守卫实现权限控制或跳转拦截：
router.beforeEach((to, from, next) => {
if (to.path === '/admin' && !isAdmin) {
next('/login');
} else {
next();
}
});注意事项
- 使用
params传参时，需在路由配置中定义动态路径（如/user/:id）。 query参数会显示在 URL 中（如?id=123），而params不会。- 编程式导航适合在异步操作（如登录验证）后跳转。
