用vue实现界面跳转

使用 router-link 组件

Vue Router 提供了 router-link 组件，用于声明式导航。通过 to 属性指定目标路由路径，生成一个可点击的链接。

<router-link to="/home">跳转到首页</router-link>

若需动态传递参数，可通过对象形式：

<router-link :to="{ path: '/user', query: { id: 123 } }">用户页</router-link>

编程式导航

通过 this.$router.push() 方法实现跳转，通常在方法或生命周期钩子中调用。

methods: {
  goToHome() {
    this.$router.push('/home');
  },
  goToUser() {
    this.$router.push({ path: '/user', params: { id: 1 } });
  }
}

使用 replace 方法可替换当前历史记录：

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

动态路由传参

在路由配置中定义动态参数（如 :id），通过 params 传递：

// 路由配置
const routes = [
  { path: '/user/:id', component: User }
];

跳转时传递参数：

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

命名路由

为路由配置 name 属性，通过名称跳转更清晰：

// 路由配置
const routes = [
  { path: '/home', name: 'home', component: Home }
];

跳转时使用名称：

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

路由模式配置

在创建路由实例时指定 history 或 hash 模式：

const router = new VueRouter({
  mode: 'history', // 或 'hash'
  routes
});

• history 模式依赖服务器配置，需避免 404 问题。
• hash 模式通过 URL 的 # 部分实现，无需服务器支持。

监听路由变化

通过 watch 监听 $route 对象，响应路由参数变化：

watch: {
  '$route'(to, from) {
    console.log('路由变化', to.path);
  }
}

导航守卫

使用全局或局部守卫控制跳转逻辑，例如验证登录状态：

router.beforeEach((to, from, next) => {
  if (to.meta.requiresAuth && !isLoggedIn()) {
    next('/login');
  } else {
    next();
  }
});

路由懒加载

通过动态导入组件提升性能：

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

以上方法覆盖了 Vue 中实现界面跳转的主要场景，根据实际需求选择合适的方式即可。