router路由守卫

在 Vue 3 中，路由守卫是用于在路由切换期间进行一些特定任务的回调函数。路由守卫可以用于许多任务，例如验证用户是否已登录、在路由切换前提供确认提示、请求数据等。Vue 3 为路由守卫提供了全面的支持，并提供了以下几种类型的路由守卫：

1. 全局前置守卫：在路由切换前被调用，可以用于验证用户是否已登录、中断导航、请求数据等。

2. 全局后置守卫：在路由切换之后被调用，可以用于处理数据、操作 DOM 、记录日志等。

3. 守卫代码的位置: 在router.js中

router.js文件

import {createRouter,createWebHashHistory} from 'vue-router'

import Home from '../components/Home.vue'
import List from '../components/List.vue'

const router = createRouter({
    history:createWebHashHistory(),
    routes:[
        {
            path:'/home',
            component:Home
        },
        {
            path:'/list',
            component:List
        },
        {
            path:'/',
            component:Home
        }
    ]
})
//设置全局前置守卫
//每次路由切换页面前，都会执行beforeEach中的回调函数
router.beforeEach(
    (to,from,next)=>{
        /*
        from 上一个页面 从哪里来
        to 下一个页面 到哪里去
        next 放行的方法 只有执行了该方法 才会放行路由
            next() 放行
            next("/路径") 路由的重定向 可以转发到其他地址 需要在某个if下执行，避免无限重定向

        */
        console.log("beforeEach")
        console.log(from.path)
        console.log(to.path)
        next()
    
    }
)

//设置全局后置守卫
//每次路由切换页面后，都会执行afterEach中的回调函数
router.afterEach(
    (to,from)=>{
        console.log("afterEach")
        console.log(from.path)
        console.log(to.path)
        next()

    }
)
export default router

mian.js文件

import { createApp } from 'vue'

import App from './App.vue'

import router from './routers/router'

const app = createApp(App)
app.use(router)
app.mount('#app')

app.vue文件

<script setup>
</script>

<template>
  <div>
    App开始内容
    <hr>
    <router-view></router-view>
    <hr>
    App结束内容
   
  </div>
  
</template>

<style scoped>

</style>

Home.vue文件

<script setup>
</script>

<template>
  <div>
    <router-link to="./List">List页</router-link>
   <h1>Home</h1>
  </div>
</template>

<style scoped>

</style>

List.vue文件

<script setup>
</script>

<template>
  <div>
    <router-link to="./Home">Home页</router-link>
    <h1>List</h1>
  </div>
</template>

<style scoped>

</style>

项目目录如下:

运行后，当点击List再点击Home页，就会出现如下的结果图