Vue 路由完成页面跳转的示例代码

在 Vue 应用开发中，路由是实现页面之间跳转的关键组件。通过合理配置和使用 Vue 路由，可以为用户提供流畅的页面切换体验。下面将为您展示一个 Vue 路由完成页面跳转的示例代码。

确保您已经安装了 Vue Router 库。在项目的入口文件（通常是 main.js）中，进行 Vue Router 的引入和配置。

import Vue from 'vue';
import VueRouter from 'vue-router';

Vue.use(VueRouter);

const routes = [
  { path: '/home', component: HomeComponent },
  { path: '/about', component: AboutComponent },
  // 可以添加更多的路由配置
];

const router = new VueRouter({
  routes
});

new Vue({
  router,
  // 其他配置
}).$mount('#app');

在上述代码中，我们定义了两个路由：/home 和 /about，并分别关联了对应的组件 HomeComponent 和 AboutComponent。

接下来，创建对应的组件。

<template>
  <div>
    <h1>这是首页</h1>
  </div>
</template>

<script>
export default {
  name: 'HomeComponent'
}
</script>

<template>
  <div>
    <h1>这是关于页面</h1>
  </div>
</template>

<script>
export default {
  name: 'AboutComponent'
}
</script>

在页面中，使用 <router-link> 组件进行页面跳转的链接。

<template>
  <div>
    <router-link to="/home">首页</router-link>
    <router-link to="/about">关于</router-link>
    <router-view></router-view>
  </div>
</template>

当点击相应的链接时，Vue Router 会根据路由配置加载对应的组件，并在 <router-view> 中进行展示，从而实现页面的跳转。

通过以上简单的示例，您可以初步了解 Vue 路由实现页面跳转的基本流程和代码结构。您可以根据实际项目需求，进一步扩展和优化路由配置，添加路由参数、嵌套路由等功能，以满足复杂的页面交互需求。

希望这个示例代码对您在 Vue 应用中实现页面跳转有所帮助，让您能够更加高效地构建出功能丰富、用户体验良好的应用程序。