vue实现路由跳转
Vue 路由跳转的实现方式
在 Vue 中，路由跳转可以通过 vue-router 实现，以下是几种常见的方法：
声明式导航（模板中使用 <router-link>）
通过 <router-link> 组件实现跳转，适合在模板中使用：
<router-link to="/home">跳转到首页</router-link>
<router-link :to="{ name: 'user', params: { id: 123 }}">用户页</router-link>编程式导航（通过 router 实例）
在 JavaScript 代码中调用 router 方法实现跳转：
// 跳转到指定路径
this.$router.push('/home');
// 跳转到命名路由并传递参数
this.$router.push({ name: 'user', params: { id: 123 } });
// 替换当前路由（不保留历史记录）
this.$router.replace('/login');
// 返回上一页
this.$router.go(-1);路由传参的方式
-
路径参数（动态路由）
在路由配置中定义动态字段：
{ path: '/user/:id', component: User }跳转时传递参数：
this.$router.push('/user/123'); -
查询参数（
query）
通过 URL 查询字符串传参：
this.$router.push({ path: '/search', query: { keyword: 'vue' } });目标 URL 会变为
/search?keyword=vue。 -
命名路由 +
params
通过路由名称和params传参：this.$router.push({ name: 'profile', params: { userId: 123 } });
路由导航守卫
可以在跳转前后执行逻辑（如权限检查）：
router.beforeEach((to, from, next) => {
if (to.meta.requiresAuth && !isAuthenticated) {
next('/login');
} else {
next();
}
});注意事项
- 使用
params时需确保路由配置了动态字段（如:id），否则参数会丢失。 query参数会显示在 URL 中，适合非敏感数据。- 编程式导航通常在方法或生命周期钩子中调用。
