vue 跳转

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

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

// 2. 创建一个路由实例并配置路由规则
import Vue from 'vue';
import Router from 'vue-router';
import Home from './views/Home.vue';
import About from './views/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: {
    goHome() {
      // 跳转到首页
      this.$router.push({ name: 'home' });
    },
    goAbout() {
      // 跳转到关于页面
      this.$router.push({ name: 'about' });
    }
  }
};

// 4. 或者在模板中使用 <router-link> 标签进行跳转
<template>
  <div>
    <router-link to="/">首页</router-link>
    <router-link to="/about">关于我们</router-link>
  </div>
</template>

解释说明：

• Vue Router 是 Vue.js 的官方路由管理器。它允许你通过定义不同的路由规则来实现页面之间的跳转。
• this.$router.push() 是一种编程式导航的方式，可以在方法中调用它来实现页面跳转。
• <router-link> 是一种声明式导航的方式，通常用于模板中，点击链接时会触发页面跳转。
• 路由配置中的 path 是 URL 路径，name 是路由的名称，component 是对应的组件。