VueRouter@4 新特性参考 https://router.vuejs.org/zh/guide/migratio

package.json

"vue": "^3.3.4",
"vue-router": "^4.2.4",
"pinia": "^2.1.6",

创建路由实例:

不用再写 new Router()，而是需要调用 createRouter 函数
选项mode===>>>history 并且移动了 base 配置createWebHistory(base?)``createWebHashHistory(base?)


// /src/router/index.js
import { createRouter, createWebHistory } from 'vue-router'
import HomeView from '../views/HomeView.vue'

const router = createRouter({
  history: createWebHistory(import.meta.env.BASE_URL),
  routes: [
    {
      path: '/',
      name: 'home',
      component: HomeView
    },
    {
      path: '/about',
      name: 'about',
      component: () => import('../views/AboutView.vue')
    }
  ]
})

export default router

Composition API `useRoute` 和 `useRouter`

请注意，在模板中我们仍然可以访问 $router 和 $route，所以不需要在 setup 中返回 router 或 route。

<script setup>
const router = useRouter() 
const route = useRoute()
function pushWithQuery(query) { 
  router.push({ name: 'search', query: { ...route.query, ...query, }, }) 
}
</script>

router.onReady() ===>>> router.isReady()

// 原先
router.onReady(onSuccess, onError)
// 替换成
router.isReady().then(onSuccess).catch(onError)

删除了 `*`（星标或通配符）路由,必须使用自定义的 regex 参数来定义所

//之前
{
 path:'*',
 component:()=>import("../components/NotFound.vue")
}

//vue-router 4
{
 path:'/:pathMatch(.*)*',
 component:()=>import("../components/NotFound.vue")
}

scrollBehavior 变化

//之前使用的
{ x:0, y:0 } 替换成了 { top: 0, left:0 }

//vue-router 4
const router = createRouter({
 scrollBehavior(to, from, savedPosition) {
  // 始终滚动到顶部
  return { top: 0, left:0 }
 },
})

全局守卫

返回值 false:取消当前的导航。如果浏览器的 URL 改变了(可能是用户手动或者浏览器后退按钮)，那么 URL 地址会重置到 from 路由对应的地址。

返回值 undefined 或返回 true: 导航是有效的，并调用下一个导航守卫

// 原写法
router.beforeEach(
(to, from, next) => { 
   if (!isAuthenticated) {
    next(false) 
   } else {
    next() 
   } 
 }
) 
// 新写法 
router.beforeEach(() => isAuthenticated)

VueRouter@4 新特性