velte-spa-router 使用导航守卫

Vele-spa-router 支持导航守卫来控制路由跳转的行为。你可以通过 `router.beforeEach` 方法来定义全局的导航守卫，也可以在每个路由配置项中定义局部的导航守卫。

全局导航守卫示例：

import { createRouter } from 'vite-plugin-ssr'
import { onBeforeRoute } from 'vite-plugin-ssr/client'
import App from './App.vue'

const routes = [
  // ...
]

const router = createRouter({ routes })

router.beforeEach((to, from, next) => {
  // 在这里做一些判断逻辑，比如验证用户是否登录等
  // 如果需要跳转到其他路由，调用 next('/path') 方法
  // 如果不需要跳转，调用 next() 方法即可
  next()
})

export default function ({ app }) {
  app.use(router)
  app.component('App', App)
}

局部导航守卫示例：

const routes = [
  {
    path: '/',
    component: Home,
    beforeEnter(to, from, next) {
      // 在这里做一些判断逻辑，比如验证用户是否登录等
      // 如果需要跳转到其他路由，调用 next('/path') 方法
      // 如果不需要跳转，调用 next() 方法即可
      next()
    }
  },
  // ...
]

需要注意的是，在导航守卫中，如果需要跳转到其他路由，需要调用 `next('/path')` 方法，否则路由跳转将被阻止。如果不需要跳转，直接调用 `next()` 方法即可。