三.Vue-Router 4.x

前言

补充一些官方文档中没有的，但是实际开发中最好需要了解的内容

• vue-router 4 的新功能

// 守卫不再需要next，并且支持async
router.beforeEach(async (to, from) => {
  // canUserAccess() returns `true` or `false`
  return await canUserAccess(to)
})

传参方式

1.问号传参

// query 传参
import { useRouter } from 'vue-router'
const router = useRouter()
router.push({ path: '/login', query: { id: 1, name: 2 }})

// query 接收参数
import { useRoute } from 'vue-router'
const route = useRoute()
const { query } = route

2.对象传参

// params 传参
import { useRouter } from 'vue-router'
const router = useRouter()
router.push({ name: 'login', params : {id: 1 , name: 2}})

// params 接收参数
import { useRoute } from 'vue-router'
const route = useRoute()
const { params } = route