很多兄弟在使用 Vue3 了，但对 Vue3 的路由却了解的非常少。甚至只知道基本的跳转和参数获取，这样做一些稍微复杂的功能肯定不够用的。最近就把 Vue3 的路由（Vue-Router4）的版本差异和使用场景整理了一下分享给大家。会的兄弟可以复习一下，不会的兄弟抓紧学起来哦！
路由模式
Vue3 中不再使用 new Router() 创建 router ，而是调用 createRouter 方法：
import {
createRouter } from 'vue-router'
const router = createRouter({
// ...
})
路由模式 mode 配置改为 history ，属性值调整为：
"history" => createWebHistory()
"hash" => createWebHashHistory()
"abstract" => createMemoryHistory()
import {
createRouter, createWebHistory } from 'vue-router'
// createWebHashHistory 和 createMemoryHistory (SSR相关) 同理
createRouter({
history: createWebHistory(),
routes: []
})
基础路径 base 被作为 createWebHistory 的第一个参数进行传递（其他路由模式也是一样）：
import {
createRouter, createWebHistory } from 'vue-router'
createRouter({
history: createWebHistory('/base-url/'),
routes: []
})
路由跳转
使用组件跳转，方式还是和 Vue2 一样：
当然，最常见的还是编程式导航，这时候需要引入 useRouter 方法：
import {
useRouter } from 'vue-router'
const router = useRouter()
// 字符串路径
router.push('/user')
// 带有路径的对象
router.push({
path: '/user', query: {
username: 'Jack' } })
router.push({
path: '/user', hash: '#team' })
// 带有命名的对象
router.push({
name: 'user', query: {
username: 'Jack' } })
router.push({
name: 'user', params: {
username: 'Tom' } })
router.push({
name: 'user', hash: '#team' })
注意：参数 params 不能和 path 一起使用。RouterLink 组件 to 属性与 router.push() 接受的参数相同，两者的规则也完全相同。
导航守卫
全局前置守卫
全局前置守卫通常用来做权限控制，使用 router.beforeEach 即可添加：
const router = createRouter({
... })
router.beforeEach((to, from) => {
// ...
// 返回 false 以取消导航
return false
})
每个守卫方法接收两个参数：
to：即将进入的目标路由
from：当前正要离开的路由
可以返回的值如下:
false：取消当前的导航。
true 或 undefined，调用下一个守卫。
一个路由地址：字符串或对象。表示中断当前导航，进行一个新的导航。
router.beforeEach(async (to, from) => {
// 检查用户是否已登录，并且避免无限重定向
if (!isAuthenticated && to.name !== 'Login') {
return {
name: 'Login' } // 将用户重定向到登录页面
}
})
在之前的 Vue Router 版本中，也是可以使用第三个参数 next 的。目前，它仍然是被支持的，这意味着你可以向任何导航守卫传递第三个参数。在这种情况下，要确保 next 在导航守卫中只被调用一次。
全局解析守卫
router.beforeResolve 用法和 router.beforeEach 类似。它是在导航被确认之前，所有组件内守卫和异步路由组件被解析之后被调用。下面这个例子，确保用户可以访
好文链接
/br>
br>
vue.js：vue.js官网
javascript：javascript下载
到此这篇vue2和vue3区别详细介绍（vue2和vue3的底层原理）的文章就介绍到这了,更多相关内容请继续浏览下面的相关推荐文章，希望大家都能在编程的领域有一番成就！版权声明：
本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如若内容造成侵权、违法违规、事实不符，请将相关资料发送至xkadmin@xkablog.com进行投诉反馈，一经查实，立即处理！
转载请注明出处，原文链接：https://www.xkablog.com/qdvuejs/30070.html