【Vue】通过vue-router实现页面跳转

在Vue中，使用vue-router可以轻松实现页面的跳转。以下是一个简单的例子：

1. 首先，确保你已经安装并设置了vue-router。如果还没有安装，可以通过npm或yarn进行安装：

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

2. 接下来，在你的Vue项目中创建一个router实例，并定义你的路由：

// router.js
import Vue from 'vue';
import Router from 'vue-router';
import HomePage from './components/HomePage.vue';
import AboutPage from './components/AboutPage.vue';
 
Vue.use(Router);
 
export default new Router({
  routes: [
    {
      path: '/',
      name: 'home',
      component: HomePage
    },
    {
      path: '/about',
      name: 'about',
      component: AboutPage
    }
    // 你可以继续添加更多的路由
  ]
});

3. 在你的Vue应用程序中使用这个router：

// main.js
import Vue from 'vue';
import App from './App.vue';
import router from './router';
 
new Vue({
  router,
  render: h => h(App)
}).$mount('#app');

4. 在你的Vue组件中，你可以使用<router-link>来创建导航链接，或者使用this.$router.push()来进行编程式的页面跳转：

<template>
  <div>
    <!-- 使用 router-link 进行导航 -->
    <router-link to="/">Home</router-link>
    <router-link to="/about">About</router-link>
 
    <!-- 使用方法进行页面跳转 -->
    <button @click="goToAbout">Go to About Page</button>
  </div>
</template>
 
<script>
export default {
  methods: {
    goToAbout() {
      this.$router.push({ name: 'about' });
    }
  }
};
</script>

以上代码展示了如何在Vue应用中通过vue-router进行页面跳转。通过<router-link>标签，用户可以点击来切换页面，通过this.$router.push()方法，你可以在Vue组件的方法中编程式地进行页面跳转。