Vue Router

**Vue Router**

Vue Router 是 Vue.js 的官方路由管理器，它使得您能够组织应用程序的各个视图（组件）并在用户之间导航。它提供了一个简单、强大且易于使用的 API，使得您可以轻松地创建复杂的单页面应用程序。

**安装和配置**

要开始使用 Vue Router，首先需要安装它：

bashnpm install vue-router@4

然后，在您的 Vue.js 应用程序中导入并注册 Vue Router：

javascriptimport { createApp } from 'vue'
import App from './App.vue'
import router from './router'

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

**路由配置**

路由配置是 Vue Router 的核心部分。您需要在 `router/index.js` 文件中定义路由规则：

javascript// router/index.jsimport { createRouter, createWebHistory } from 'vue-router'

const routes = [
 {
 path: '/',
 name: 'home',
 component: () => import('@/views/Home.vue')
 },
 {
 path: '/about',
 name: 'about',
 component: () => import('@/views/About.vue')
 }
]

const router = createRouter({
 history: createWebHistory(process.env.BASE_URL),
 routes})

export default router

在上面的例子中，我们定义了两个路由规则：一个是根路径 `/`，对应的组件是 `Home.vue`；另一个是 `/about` 路径，对应的组件是 `About.vue`。

**导航**

要在应用程序之间导航，您可以使用 Vue Router 提供的 API：

javascript// App.vue<template>
 <div>
 <h1>Vue Router Demo</h1>
 <button @click="goHome">返回首页</button>
 <button @click="goAbout">关于我们</button>
 </div>
</template>

<script>
export default {
 methods: {
 goHome() {
 this.$router.push('/')
 },
 goAbout() {
 this.$router.push('/about')
 }
 }
}
</script>

在上面的例子中，我们使用 `$router.push()` 方法来导航到不同的路由。

**参数传递**

如果您需要传递参数给目标组件，可以使用 Vue Router 提供的 `params` 属性：

javascript// router/index.jsconst routes = [
 {
 path: '/user/:id',
 name: 'user',
 component: () => import('@/views/User.vue')
 }
]

然后，在目标组件中可以通过 `$route.params.id` 来获取参数：

javascript// User.vue<template>
 <div>
 <h1>用户 {{ $route.params.id }}</h1>
 </div>
</template>

<script>
export default {
 mounted() {
 console.log(this.$route.params)
 }
}
</script>

**路由守卫**

路由守卫是 Vue Router 提供的 API，可以在导航前后执行一些操作：

javascript// router/index.jsconst routes = [
 {
 path: '/',
 name: 'home',
 component: () => import('@/views/Home.vue'),
 beforeEnter(to, from, next) {
 console.log('进入首页')
 next()
 }
 },
 {
 path: '/about',
 name: 'about',
 component: () => import('@/views/About.vue'),
 beforeEnter(to, from, next) {
 console.log('进入关于我们页')
 next()
 }
 }
]

在上面的例子中，我们定义了两个路由守卫，分别是在进入首页和关于我们页时执行的。

**总结**

Vue Router 是 Vue.js 的官方路由管理器，它使得您能够组织应用程序的各个视图（组件）并在用户之间导航。它提供了一个简单、强大且易于使用的 API，使得您可以轻松地创建复杂的单页面应用程序。

本文介绍了 Vue Router 的基本概念和使用方法，包括路由配置、导航、参数传递、路由守卫等方面。通过阅读本文，您应该能够掌握 Vue Router 的基本知识，并且能够在实际项目中使用它来管理您的应用程序的路由。