Vue 3 中页面跳转方式的详细介绍

最新推荐文章于 2025-03-15 18:31:53 发布

licy__

最新推荐文章于 2025-03-15 18:31:53 发布

阅读量2.5k

点赞数 35

文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/licy__/article/details/144549688

版权

示例：使用 window.location.href

Vue 3 中页面跳转方式的详细介绍

Vue.js 是一个用于构建用户界面的渐进式 JavaScript 框架，它提供了多种方法来实现页面之间的导航。在 Vue 3 中，页面跳转主要通过 Vue Router 来管理，同时也支持其他方式如编程式导航和使用锚点链接。本文将详细介绍 Vue 3 中的各种页面跳转方式，并通过具体的代码示例帮助你更好地掌握这些功能。

使用 Vue Router 实现页面跳转

Vue Router 是官方推荐的路由管理器，它可以轻松地为 Vue 应用添加单页应用（SPA）的功能。通过 Vue Router，你可以定义多个路由规则，并根据用户的操作动态切换不同的视图，而无需重新加载整个页面。

安装 Vue Router

首先，确保你的项目中已经安装了 Vue Router：

npm install vue-router@4

然后，在项目的入口文件中引入并配置 Vue Router：

// main.js 或 main.ts
import { createApp } from 'vue';
import App from './App.vue';
import { createRouter, createWebHistory } from 'vue-router';
import Home from './views/Home.vue';
import About from './views/About.vue';

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

const router = createRouter({
  history: createWebHistory(),
  routes
});

createApp(App).use(router).mount('#app');