# Vue Router

Vue 3 版本上线，Vue Router 也有配合的版本（Vue Router V4）

这里记录 Vue Router V3 -> V4 的重大变化（Breaking Change）

# new Router -> createRouter

Vue Router 不再是一个对象，而是一个函数，现在不需要写new Router，而是createRouter

// 以前是
// import Router from 'vue-router'
import { createRouter } from 'vue-router'
const router = createRouter({
  // ...
})

1
2
3
4
5
6

# 新的 history 配置替代 mode

mode: 'history' 配置已经被一个更灵活的 history 配置所取代。根据你使用的模式，你必须用适当的函数替换它：

"history": createWebHistory()
"hash": createWebHashHistory()
"abstract": createMemoryHistory()

import { createRouter, createWebHistory } from 'vue-router'
// 还有 createWebHashHistory 和 createMemoryHistory

createRouter({
  history: createWebHistory(),
  routes: [],
})

1
2
3
4
5
6
7

# setup 中访问当前路由实例

由于在setup中没有this的概念，所以this.$router也就不复存在了，替换方案是useRouter

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

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

    function pushWithQuery(query) {
      router.push({
        name: 'search',
        query: {
          ...route.query,
        },
      })
    }
  },
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

# 其他重大更新

查看更多重大更新 (opens new window)

# 组合式 API

查看在 Vue Router 中的组合式 API (opens new window)