VUE3入门开发：使用Vue-Router实现页面跳转

vue 3是当下最流行的javascript框架之一，用于构建交互式的用户界面。vue-router是vue框架的一个插件，用于实现单页面应用程序中的路由管理。在本文中，我们将介绍如何使用vue-router在vue 3中实现页面跳转。

一、安装和配置Vue-Router

在开始之前，确保你已经安装了Vue 3。如果还没有安装，可以参考官方文档进行安装：https://v3.cn.vuejs.org/guide/installation.html。

安装Vue-Router:

在终端中，运行以下命令进行安装：

立即学习“前端免费学习笔记（深入）”；

npm install vue-router@4.0.0-alpha.13

在Vue 3中，Vue-Router的版本应该不低于4.0.0-alpha.13。

在安装Vue-Router之后，我们需要在Vue 3应用程序中配置Vue-Router。创建一个routes.js文件：

import Home from '@/components/Home'
import About from '@/components/About'

export default [
  {
    path: '/',
    name: 'Home',
    component: Home
  },
  {
    path: '/about',
    name: 'About',
    component: About
  }
]

在这个文件中，我们定义了两个路由，一个是主页（Home），另一个是关于我们（About）页面。

我们还需要在Vue 3应用程序的入口文件（main.js）中导入Vue-Router并进行配置：

import { createApp } from 'vue'
import App from './App.vue'
import routes from './routes'
import { createRouter, createWebHistory } from 'vue-router'

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

const app = createApp(App)

app.use(router)

app.mount('#app')

在这个文件中，我们通过createRouter函数创建了一个router实例，并使用createWebHistory函数来创建router的模式。我们还将routes传递给router实例。

在Vue 3中，我们使用app.use()方法将Vue-Router插件安装到Vue应用程序中。最后，将app.mount()方法放到app.use()方法之后，这确保Vue-Router已经正确安装并且应用程序能够正常运行。

二、实现页面跳转

RecoveryFox AI

AI驱动的数据恢复、文件恢复工具

下载

现在，我们已经成功地安装和配置了Vue-Router，接下来我们将使用Vue-Router来实现页面跳转。

1. 在App.vue文件中添加路由链接：

在这个模板中，我们使用组件来创建路由链接，指定to属性为路由路径。

2. 在Home.vue和About.vue中添加内容

我们为Home和About页面创建了两个Vue组件，我们需要在这些组件的模板中添加一些内容来验证页面是否正常跳转。

Home.vue:

About.vue:

现在，我们已经成功地设置了路由链接和页面内容。我们可以使用这些链接进行页面跳转。

三、总结

在本文中，我们了解了如何使用Vue-Router在Vue 3中实现页面跳转。首先，我们安装并配置Vue-Router。然后，我们使用组件创建路由链接。最后，我们在组件模板中添加内容来验证页面是否跳转成功。

Vue-Router有很多其他功能，如动态路由，嵌套路由，路由守卫等等。通过精通这些功能，你可以创建复杂的单页面应用程序，并在应用程序中使用跳转和导航。