vue页面跳转

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

// 1. 安装 Vue Router (如果尚未安装)
// npm install vue-router

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

Vue.use(VueRouter);

const routes = [
  { path: '/', component: Home },
  { path: '/about', component: About }
];

const router = new VueRouter({
  routes
});

// 3. 在 Vue 实例中使用 router
new Vue({
  router,
  render: h => h(App)
}).$mount('#app');

// 4. 在组件中进行页面跳转
// 方法 1: 使用 <router-link> 组件进行导航
<template>
  <div>
    <router-link to="/">Home</router-link>
    <router-link to="/about">About</router-link>
  </div>
</template>

// 方法 2: 使用编程式导航
methods: {
  goHome() {
    this.$router.push('/');
  },
  goAbout() {
    this.$router.push('/about');
  }
}

解释说明：

• Vue Router 是 Vue.js 的官方路由管理器，它允许你通过定义不同的路由来创建单页应用（SPA）。
• <router-link> 是 Vue Router 提供的一个组件，用于声明式的导航。它会自动将 to 属性转换为相应的 URL，并且不会刷新页面。
• 编程式导航 是通过调用 $router.push() 方法来实现的，可以在 JavaScript 中动态地进行页面跳转。

如果你需要更多的自定义功能，比如传递参数、监听路由变化等，可以参考 Vue Router 的官方文档。