vue3 router

Vue 3使用的是Vue Router 4，相较于Vue Router 3有一些变化。

1. 创建Router实例的方式有所不同：

Vue Router 3：

import Vue from 'vue'
import Router from 'vue-router'

Vue.use(Router)

export default new Router({...})

Vue Router 4：

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

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

export default router

2. 在组件中使用路由需要使用`<router-link>`和`<router-view>`组件。在VueRouter 4中，这些组件需要从`vue-router`中导入：

import { RouterLink, RouterView } from 'vue-router'

export default {
  components: {
    RouterLink,
    RouterView
  }
}

3. Vue Router 4引入了新的API：`useRoute`和`useRouter`。`useRoute`返回当前路由信息，`useRouter`返回当前路由实例。可以在任何组件中使用这些API，不需要通过props传递路由信息。

import { useRoute, useRouter } from 'vue-router'

export default {
  setup() {
    const route = useRoute()
    const router = useRouter()

    // ...
  }
}

这些是Vue Router 4的一些变化，更多细节可以查看Vue Router的官方文档。