vue 跳转页面

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

// 1. 首先，确保你已经安装并配置了 Vue Router。
// 在 main.js 中引入并使用 Vue Router：
import Vue from 'vue';
import VueRouter from 'vue-router';
import App from './App.vue';
import Home from './views/Home.vue';
import About from './views/About.vue';

Vue.use(VueRouter);

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

const router = new VueRouter({
  routes
});

new Vue({
  router,
  render: h => h(App)
}).$mount('#app');

// 2. 在组件中进行页面跳转：
// 方法一：使用 <router-link> 标签（推荐）
<template>
  <div>
    <router-link to="/">Home</router-link>
    <router-link to="/about">About</router-link>
  </div>
</template>

// 方法二：使用编程式导航
<script>
export default {
  methods: {
    goHome() {
      this.$router.push('/');
    },
    goAbout() {
      this.$router.push('/about');
    }
  }
}
</script>

// 解释说明：
// - Vue Router 是 Vue 官方的路由管理器，它允许你在单页面应用 (SPA) 中实现页面跳转而不刷新整个页面。
// - `<router-link>` 是 Vue Router 提供的一个标签，用于声明式地导航到不同的路由。
// - `this.$router.push()` 是编程式导航的方式，可以在 JavaScript 中动态地跳转到指定的路由。