vue跳转到指定页面

// 使用 Vue Router 进行页面跳转的示例代码

// 1. 安装 Vue Router (如果还没有安装)
// npm install vue-router

// 2. 创建 router 实例并配置路由
import Vue from 'vue';
import Router from 'vue-router';
import Home from './components/Home.vue';
import About from './components/About.vue';

Vue.use(Router);

const router = new Router({
  routes: [
    {
      path: '/',
      name: 'Home',
      component: Home
    },
    {
      path: '/about',
      name: 'About',
      component: About
    }
  ]
});

// 3. 在组件中使用 $router.push 方法进行页面跳转
export default {
  methods: {
    goToAbout() {
      // 跳转到关于页面
      this.$router.push({ name: 'About' });
    }
  }
}

// 解释说明：
// - `this.$router.push` 是 Vue Router 提供的方法，用于在应用内部进行页面跳转。
// - 可以通过传递路径字符串或命名路由对象来指定目标页面。
// - 上述代码展示了如何从一个组件方法中触发页面跳转到 "About" 页面。

示例解释：

• 安装 Vue Router：确保你已经安装了 vue-router，这是 Vue.js 的官方路由管理器。
• 创建路由实例：定义了两个路由，分别是首页 (Home) 和关于页 (About)。
• 页面跳转：在组件中使用 this.$router.push 方法可以实现页面跳转。这里演示了如何从当前页面跳转到 About 页面。

如果你需要更多的自定义选项或者参数传递，可以在 push 方法中添加更多配置。