Vue页面跳转

安装Vue Router

首先，你需要安装Vue Router。如果你的项目是通过Vue CLI创建的，Vue Router可能已经包含在内。如果没有，你可以通过npm或yarn来安装它：

npm install vue-router@next
# 或者
yarn add vue-router@next

创建路由实例

在你的项目中创建一个路由配置文件，比如router/index.js，并设置路由规则：

// router/index.js
import { createRouter, createWebHistory } from 'vue-router';
import Home from '../views/Home.vue';
import About from '../views/About.vue';

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

const router = createRouter({
  history: createWebHistory(process.env.BASE_URL),
  routes
});

export default router;

在Vue应用中使用路由

在你的主Vue实例中，你需要引入并使用这个路由配置：

// main.js
import { createApp } from 'vue';
import App from './App.vue';
import router from './router';

const app = createApp(App);

app.use(router);

app.mount('#app');

页面跳转的方法

使用<router-link>

在模板中，你可以使用<router-link>组件来进行页面跳转。它会渲染成一个链接，并且点击时会导航到指定的路由：

<!-- 导航到名为 "About" 的路由 -->
<router-link to="{ name: 'About' }">About</router-link>

或者直接指定路径：

<!-- 导航到 "/about" 路径 -->
<router-link to="/about">About</router-link>

使用编程式导航

在组件的方法中，你可以使用this.$router对象来进行编程式导航：

export default {
  methods: {
    goToAbout() {
      this.$router.push({ name: 'About' });
    }
  }
}

或者使用路径：

export default {
  methods: {
    goToAbout() {
      this.$router.push('/about');
    }
  }
}

使用<router-view>

在你的应用的主组件（通常是App.vue）中，你需要一个地方来显示当前路由匹配到的组件。这个地方就是<router-view>：

<!-- App.vue -->
<template>
  <div id="app">
    <router-link to="/">Home</router-link>
    <router-link to="/about">About</router-link>
    <router-view></router-view>
  </div>
</template>

当用户导航到一个新的路由时，对应的组件会被渲染在<router-view>的位置。