Vue Router 是 Vue.js 官方的路由管理器，它与 Vue.js 的核心深度集成，可以快速构建单页面应用程序。

Vue 3 中的 Vue Router 进行了一些重要的变化，下面是 Vue 3 中 Vue Router 的一些更新和详解：

1.创建 Router 对象的方法

在 Vue 2 中创建 Router 对象时，需要先安装 vue-router 插件，然后通过 Vue.use(VueRouter) 来注册插件。

但是在 Vue 3 中，Router 对象的创建方式变了，它已经不是 vue-router 的插件，而是独立的一个包。因此，我们需要先安装 vue-router 包：

npm install vue-router@4.0.0-beta.6

然后在 main.js 中创建 Router 对象，并将其挂载到 Vue 应用中

Vue Router 的路由配置在 Vue 3 中与 Vue 2 中相同：

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

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

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

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

2.路由器实例

在 Vue 3 中，创建 Vue Router 实例的方式与 Vue 2 中不同。Vue 3 中可以使用 createRouter() 方法创建一个路由器实例。

import { createRouter, createWebHistory } from 'vue-router'

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

export default router

可以使用 createWebHashHistory() 方法创建一个带有 # 的哈希模式路由，也可以使用 createWebHistory() 方法来创建一个 HTML5 History 模式路由。

3.使用路由的变化

在 Vue 2 中，我们使用 $route 和 $router 来访问当前的路由信息和导航到不同的路由，例如：

<template>
  <div>
    <div>当前路径：{{$route.path}}</div>
    <button @click="$router.push('/about')">去 About 页面</button>
  </div>
</template>

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

但是在 Vue 3 中，$route 和 $router 被抽象掉了，我们需要使用 useRouter 和 useRoute 来获取当前的路由信息和导航到不同的路由，例如：

<template>
  <div>
    <div>当前路径：{{route.path}}</div>
    <button @click="goAbout()">去 About 页面</button>
  </div>
</template>

<script>
import { useRouter, useRoute } from 'vue-router'

export default {
  name: 'Home',
  setup() {
    const router = useRouter()
    const route = useRoute()

    const goAbout = () => {
      router.push('/about')
    }

    return {
      route,
      goAbout
    }
  }
}
</script>

4.路由跳转

在 Vue 2 中，我们使用 $router.push、$router.replace 和 $router.go 来进行路由跳转，例如：

<template>
  <div>
    <button @click="$router.push('/about')">去 About 页面</button>
    <button @click="$router.replace('/about')">去 About 页面（replace）</button>
    <button @click="$router.go(-1)">返回上一页</button>
  </div>
</template>

但是在 Vue 3 中，我们使用 router.push、router.replace 和 router.go 来进行路由跳转，例如：

<template>
  <div>
    <button @click="goAbout()">去 About 页面</button>
    <button @click="goAbout(true)">去 About 页面（replace）</button>
    <button @click="goBack()">返回上一页</button>
  </div>
</template>

<script>
import { useRouter } from 'vue-router'

export default {
  name: 'Home',
  setup() {
    const router = useRouter()

    const goAbout = (replace = false) => {
      const routeObj = { path: '/about' }
      replace ? router.replace(routeObj) : router.push(routeObj)
    }

    const goBack = () => {
      router.go(-1)
    }

    return {
      goAbout,
      goBack
    }
  }
}
</script>

这就是在 Vue 3 中使用 Vue Router 的一些更新和详解。总的来说，Vue 3 中的 Vue Router 更加灵活和实用，可以更好地支持单页面应用程序的构建工作。

5.动态路由

在 Vue 3 中，动态路由与 Vue 2 中基本相同。可以使用路径参数表示动态路由。例如，在路由配置中使用 :id 表示一个动态的 id 变量。

const routes = [
  {
    path: '/user/:id',
    name: 'User',
    component: User
  }
]

在组件中可以使用 $route.params.id 访问路径中传入的 id 值(我们需要使用 useRouter 和 useRoute 来获取当前的路由信息)。

<template>
  <div>User {{ $route.params.id }}</div>
</template>

6.命名路由

Vue 3 中的命名路由与 Vue 2 中的方式基本相同。定义一个路由时可以指定一个 name 属性来命名。

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

在组件中可以使用 $router.push({ name: 'about' }) 来跳转到命名路由。(我们需要使用 useRouter 和 useRoute 来获取当前的路由信息)

7.嵌套路由

在 Vue 3 中，可以使用嵌套路由来实现多层级路由。在路由配置中定义不同的路由组件，使用 children 属性把它们组合起来。

const routes = [
  {
    path: '/home',
    component: Home,
    children: [
      {
        path: '',
        name: 'HomeIndex',
        component: HomeIndex
      },
      {
        path: 'profile',
        name: 'Profile',
        component: Profile
      },
      {
        path: 'settings',
        name: 'Settings',
        component: Settings
      }
    ]
  }
]

在组件中可以使用 <router-link> 和 this.$router.push() 跳转到子路由。

8.路由守卫

在 Vue 3 中，路由守卫与 Vue 2 中的方式基本相同。可以使用 beforeEach()、beforeResolve() 和 afterEach() 来实现全局的路由守卫，或在组件中使用 beforeRouteEnter()、beforeRouteUpdate() 和 beforeRouteLeave() 来实现局部的路由守卫。

router.beforeEach((to, from, next) => {
  // ...
})

export default {
  beforeRouteEnter(to, from, next) {
    // ...
  },
  beforeRouteUpdate(to, from, next) {
    // ...
  },
  beforeRouteLeave(to, from, next) {
    // ...
  }
}

在路由守卫中可以使用 next()、next(false)、next('/') 等方式来控制路由跳转行为。

总结

Vue Router 是 Vue.js 的官方路由管理库，用来实现界面之间的跳转和参数传递。在 Vue 3 中，Vue Router 与 Vue 2 相比没有太大的改变，但它在内部进行了许多重构和优化，增加了很多新