vue3是目前最新的vue版本，其路由函数相比较vue2版本发生了较大的变化。作为实现单页应用（spa）的重要工具之一，vue3中的路由函数应用十分广泛。在本文中，我们将详细讲解vue3中的路由函数，包括路由跳转及其实现。
一、Vue3路由函数简介
Vue3中的路由函数主要由两个部分组成：路由实例和路由器。其中，路由实例是一个Vue Router实例，用于定义路由及其跳转路径；而路由器则是负责将路由实例注入到Vue实例中，使之生效并能进行路由跳转。
二、路由实例
- 创建路由实例
在Vue3中，我们可以通过调用Vue Router函数来创建路由实例，示例代码如下：
立即学习“前端免费学习笔记（深入）”；
import { createRouter, createWebHistory } from 'vue-router';
const router = createRouter({
history: createWebHistory(),
routes: [
{
path: '/',
component: Home
},
{
path: '/about',
component: About
},
{
path: '/contact',
component: Contact
}
]
})在上述代码中，createRouter()函数可以接受一个配置对象，包括history和routes两个属性。其中history用于指定路由模式，routes则用于定义路由表。
- 路由表定义
路由表是由路由配置对象数组组成的，数组中每个对象都表示一个路由的定义，包括以下几个属性：
-
path：路由路径； -
component：路由组件； -
name：路由名称； -
meta：路由元信息。
在路由表中，我们可以使用path和component来定义路由路径和路由组件，示例代码如下：
import Home from '@/views/Home.vue';
import About from '@/views/About.vue';
import Contact from '@/views/Contact.vue';
const routes = [
{
path: '/',
component: Home
},
{
path: '/about',
component: About
},
{
path: '/contact',
component: Contact
}
]路由路径可以使用占位符来表示动态参数，示例代码如下：
const router = createRouter({
routes: [
{
path: '/user/:id',
component: User,
props: true
}
]
})上述示例中，路由路径/user/:id中的冒号表示该路径可以匹配一个动态参数，我们可以通过props属性来将动态参数作为组件属性传递到路由组件中。
- 嵌套路由
在Vue3中，我们可以使用嵌套路由来组织应用的路由结构。嵌套路由是指路由路径包含多个层级的情况，示例代码如下：
const router = createRouter({
routes: [
{
path: '/',
component: Layout,
children: [
{
path: '',
component: Home
},
{
path: '/about',
component: About
},
{
path: '/contact',
component: Contact
}
]
}
]
})上述示例中，我们在/路径下定义了一个名为Layout的路由组件，并将其作为嵌套路由的父级路径。Layout组件中存在三个子路由，分别对应不同的路径。
- 路由守卫
路由守卫用于在路由跳转前或跳转后执行一些逻辑操作。在Vue3中，路由守卫主要分为全局守卫、路由守卫和组件守卫三类。
全局守卫有三种：
-
beforeEach：在路由跳转前执行逻辑； -
beforeResolve：在路由解析完成后，进行路由匹配前执行的逻辑； -
afterEach：路由跳转后执行的逻辑。
路由守卫分为两种：
-
beforeEnter：在进入路由之前执行的逻辑； -
beforeLeave：在离开路由之前执行的逻辑。
组件守卫是针对组件级路由而言，包括以下几种：
-
beforeRouteEnter：在组件进入路由前执行的逻辑； -
beforeRouteUpdate：在组件更新路由前执行的逻辑； -
beforeRouteLeave：在组件离开路由前执行的逻辑。
三、路由器
- 注入路由
在创建好路由实例后，我们需要将其注入到Vue实例中，使之生效。在Vue3中，我们可以通过调用createApp函数来创建Vue实例，示例代码如下：
import { createApp } from 'vue';
import App from './App.vue';
import router from './router';
const app = createApp(App);
app.use(router);
app.mount('#app');在上述代码中，我们使用createApp函数创建Vue实例，并通过use方法将路由实例router注入到Vue实例中。
- 路由跳转
在Vue3中，我们可以通过调用router.push方法实现路由跳转。router.push方法接受一个参数，用于指定需要跳转的路由路径。示例代码如下：
import { RouterLink } from 'vue-router';
<RouterLink to="/">Home</RouterLink>
<RouterLink to="/about">About</RouterLink>
<RouterLink to="/contact">Contact</RouterLink>在上述示例中，我们使用<RouterLink>组件代替了Vue2版本中的<router-link>组件，用于实现路由跳转。
以上就是Vue3中的路由函数的详细讲解，包括路由实例和路由器的使用以及路由跳转的实现。通过本文的学习，相信大家已经对Vue3中的路由函数有了进一步的了解。
