vue cli实现跳转

Vue CLI 实现页面跳转的方法

在 Vue CLI 项目中，页面跳转通常通过 Vue Router 实现。以下是几种常见的跳转方式：

使用 <router-link> 组件

<router-link to="/about">跳转到关于页面</router-link>

<router-link> 是 Vue Router 提供的组件，会自动渲染为 <a> 标签，to 属性指定目标路由路径。

编程式导航

在组件方法中使用 this.$router.push：

methods: {
  goToAbout() {
    this.$router.push('/about');
  }
}

也可以传递路由名称（需在路由配置中定义 name）：

this.$router.push({ name: 'about' });

带参数的跳转

// 传递参数
this.$router.push({ path: '/user', query: { id: '123' } });
// 或
this.$router.push({ name: 'user', params: { id: '123' } });

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

替换当前路由

使用 replace 方法不会在 history 中留下记录：

this.$router.replace('/about');

路由配置示例

确保在 src/router/index.js 中配置了路由：

const routes = [
  {
    path: '/about',
    name: 'about',
    component: () => import('../views/About.vue')
  }
];

动态路由匹配

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

跳转时传递参数：

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

在 User 组件中通过 this.$route.params.id 获取参数值。

导航守卫

可以在路由跳转前后执行逻辑：

router.beforeEach((to, from, next) => {
  // 跳转前逻辑
  next();
});

这些方法覆盖了 Vue CLI 项目中实现页面跳转的主要场景，根据具体需求选择合适的方式。