ナビゲーションガード

router.beforeEach((to, from) => {
  console.log("going to", to.path)
  // return true to allow,
  // or a route to redirect
})

router.beforeEach((to) => {
  if (to.meta.requiresAuth && !isLoggedIn()) {
    return { name: "login" }
  }
  return true
})

const routes = [
  {
    path: "/dashboard",
    component: Dashboard,
    meta: { requiresAuth: true }
  }
]

router.beforeEach((to) => {
  const authed = localStorage.getItem("token")
  if (to.meta.requiresAuth && !authed) {
    return { name: "login", query: { redirect: to.fullPath } }
  }
})

const routes = [
  {
    path: "/admin",
    component: Admin,
    beforeEnter: (to, from) => {
      return isAdmin() ? true : { name: "home" }
    }
  }
]

import { onBeforeRouteLeave } from "vue-router"

onBeforeRouteLeave((to, from) => {
  if (hasUnsavedChanges.value) {
    return window.confirm("Leave without saving?")
  }
})

import { onBeforeRouteUpdate } from "vue-router"

onBeforeRouteUpdate((to) => {
  loadUser(to.params.id)
})

// Classic style with next()
router.beforeEach((to, from, next) => {
  if (canAccess(to)) {
    next()         // proceed
  } else {
    next("/login") // redirect
  }
})