vue文件实现页面跳转

使用 router-link 实现跳转

在 Vue 模板中直接使用 <router-link> 组件，通过 to 属性指定目标路径：

<router-link to="/target-page">跳转到目标页</router-link>

动态路径可通过 :to 绑定对象实现：

<router-link :to="{ path: '/target-page' }">路径跳转</router-link>
<router-link :to="{ name: 'TargetPage' }">命名路由跳转</router-link>

编程式导航

通过 this.$router.push() 方法在脚本中跳转：

// 路径跳转
this.$router.push('/target-page');
// 对象形式跳转
this.$router.push({ path: '/target-page' });
// 命名路由跳转
this.$router.push({ name: 'TargetPage' });
// 带参数跳转
this.$router.push({ path: '/target-page', query: { id: 123 } });

路由传参

通过 params 或 query 传递参数：

// params 传参（需路由配置占位）
this.$router.push({ name: 'TargetPage', params: { id: 123 } });
// query 传参（URL显示参数）
this.$router.push({ path: '/target-page', query: { id: 123 } });

目标页面通过 this.$route.params 或 this.$route.query 接收参数。

路由配置示例

确保路由已配置目标页面：

const routes = [
  {
    path: '/target-page',
    name: 'TargetPage',
    component: () => import('./views/TargetPage.vue')
  }
];

替换当前路由

使用 this.$router.replace() 替换当前历史记录：

this.$router.replace({ path: '/target-page' });

返回上一页

通过 this.$router.go(-1) 返回：

this.$router.go(-1);

动态路由匹配

路由配置中使用动态字段：

{
  path: '/target-page/:id',
  component: () => import('./views/TargetPage.vue')
}

跳转时传递参数：

this.$router.push('/target-page/123');