Vue Router

安装

npm install vue-router@4

快速上手

基础配置

import { createRouter, createWebHashHistory } from 'vue-router'
import type { RouteRecordRaw } from 'vue-router'

const routes: RouteRecordRaw[] = []

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

export default router

使用

再组件中使用 router 和 route 需要在 vue-router 中引入进行使用

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

const router = useRouter()
const route = useRoute()

没有安装路由

如果你连 vue-router 都没用安装，还需要进行导航栏地址的改变，也可以使用 vue 内部的 getCurrentInstance 方法获取当前组件实例，从而获取 route 和 router

import { getCurrentInstance } from 'vue'

const { proxy } = getCurrentInstance()

console.log(proxy.$route)
console.log(proxy.$router)

路由钩子

全局钩子： beforeEach、 afterEach、beforeResolve 单个路由里面的钩子： beforeEnter 组件路由：beforeRouteEnter、 beforeRouteUpdate、 beforeRouteLeave