vue 页面跳转

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

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

// 2. 创建一个 Vue 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. 在组件中使用 this.$router.push 进行页面跳转
export default {
  methods: {
    goHomePage() {
      // 跳转到首页
      this.$router.push({ name: 'Home' });
    },
    goAboutPage() {
      // 跳转到关于页面
      this.$router.push({ name: 'About' });
    }
  }
};

// 4. 在模板中使用 <router-link> 组件进行页面跳转
<template>
  <div>
    <router-link to="/">首页</router-link>
    <router-link to="/about">关于</router-link>

    <!-- 显示匹配到的组件 -->
    <router-view></router-view>
  </div>
</template>

// 解释说明：
// - `this.$router.push` 是 Vue Router 提供的方法，用于程序化地导航到不同的路由。
// - `<router-link>` 是 Vue Router 提供的组件，用于声明式地导航到不同的路由。
// - `<router-view>` 是一个占位符，用于显示当前路由匹配到的组件。