Vue3.0路由拦截

全局路由器拦截：官方叫导航守卫

index.js路由器

import { createRouter, createWebHistory } from "vue-router"; //导入vue-router路由模块,createWebHashHistor函数const routes = [{path: "/",  //路径: redirect: "/Films"  //涉及到多级页面跳转需要用路径的跳转，不能用name的跳转; 浏览器进入http://localhost:5173/ 首先要跳转的路径是/Films，即：要跳转到http://localhost:5173/Films，而进入http://localhost:5173/Films后又发现/Films要重定向到/Films/NowPlaying，这样就实现了打开http://localhost:5173/就加载出来了http://localhost:5173/Films/NowPlaying内容// redirect: {//     name: "Films" //重定向到路由名称为Tabbar的路由中，这样当浏览器输入的是：http://localhost:5173/ 则会重定向跳转到 http://localhost:5173/Films// }},{path: "/Navbar",  //路径：导航栏name: "Navbar",//当路由被触发时，该组件才会被异步加载，举列：打开页面就不会加载所有的组件，而是根据当前页面需要的组件进行异步加载//这样可以减少初始加载时间，提升用户体验，同时也节省了不必要的资源消耗。component: () => import("../views/Navbar.vue")},{path: "/FilmsDetail/:myid/:myname",  //路径：电影内容详细  "/FilmsDetail/:myid"的意思是：当路由以/FilmsDetail/为开头那么它后面的就是myid参数：举列：http://localhost:5173/FilmsDetail/123  那么这个123就是myid参数； 如果存在两个参数呢？"/FilmsDetail/:myid/:myname"  举列：http://localhost:5173/FilmsDetail/123/lily 那么这个123就是myid参数，lily就是myname参数name: "FilmsDetail",  //路由名称，如果不指定name 默认的name为default//当路由被触发时，该组件才会被异步加载，举列：打开页面就不会加载所有的组件，而是根据当前页面需要的组件进行异步加载//这样可以减少初始加载时间，提升用户体验，同时也节省了不必要的资源消耗。component: () => import("../views/FilmsDetail.vue")},{path: "/Tabbar",  //路径：底部选项卡name: "Tabbar",  //路由名称，如果不指定name 默认的name为default//当路由被触发时，该组件才会被异步加载，举列：打开页面就不会加载所有的组件，而是根据当前页面需要的组件进行异步加载//这样可以减少初始加载时间，提升用户体验，同时也节省了不必要的资源消耗。component: () => import("../views/Tabbar.vue"),},{path: "/Films",  //路径:电影name: "Films",  //路由名称，如果不指定name 默认的name为default//当路由被触发时，该组件才会被异步加载，举列：打开页面就不会加载所有的组件，而是根据当前页面需要的组件进行异步加载//这样可以减少初始加载时间，提升用户体验，同时也节省了不必要的资源消耗。component: () => import("../views/Films.vue"),children: [       //通过children配置子级路由{path: 'NowPlaying', //可以写成：'/Films/NowPlaying' 但是不要写成 '/NowPlaying'(正在热映)name: "NowPlaying",component: () => import("../views/NowPlaying.vue")},{path: 'ComingSoon', //可以写成：'/Films/ComingSoon' 但是不要写成 '/ComingSoon'(即将上映)component: () => import("../views/ComingSoon.vue")},{//为什么在子路由中添加一个Films路由？：答：因为在进入Films组件后就需要立即加载NowPlaying组件的内容。:注意：这里需要加斜杆/Films  ；//从app.vue组件中进入Films组件的时候，跳转的地址是：http://localhost:5173/Films，这时候就找到了顶级路由/Films，到然进入子级路由children，发现了后/Films需要跳转到/Films/NowPlayingpath: '/Films',redirect: "/Films/NowPlaying"},]},{path: "/Cinemas",  //路径:影院name: "Cinemas",   //路由名称，如果不指定name 默认的name为default//当路由被触发时，该组件才会被异步加载，举列：打开页面就不会加载所有的组件，而是根据当前页面需要的组件进行异步加载//这样可以减少初始加载时间，提升用户体验，同时也节省了不必要的资源消耗。component: () => import("../views/Cinemas.vue")},{path: "/Home",  //路径:我的name: "Home",   //路由名称，如果不指定name 默认的name为default//当路由被触发时，该组件才会被异步加载，举列：打开页面就不会加载所有的组件，而是根据当前页面需要的组件进行异步加载//这样可以减少初始加载时间，提升用户体验，同时也节省了不必要的资源消耗。component: () => import("../views/Home.vue"),meta: //加一个自定义参数：里面的参数随便我们定{requireAuth: true,   // 对当前路由路径做一个标记，代表进入这个页面需要登陆才能进。用于在router.beforeEach里面做登陆验证的时候，判断这个requireAuth参数是否为true，为true则需要登陆才能进入aaa: "wowow"}},{path: "/Login",  //登陆name: "Login",   //路由名称，如果不指定name 默认的name为defaultcomponent: () => import("../views/Login.vue"),},{path: "/:pathMatch(.*)",  //404错误name: "NotFound",  //路由名称，如果不指定name 默认的name为defaultcomponent: () => import("../views/NotFound.vue")}]//创建路由对象
const router = createRouter({history: createWebHistory(),     //这种方式基于浏览器 history API 的路由模式，url的样式是：http://localhost:5173/listroutes: routes,
})//路由全局拦截：在进入页面之前就进行拦截。可以用于做用户登陆验证
//参数to：  表示即将进入的目标路由对象
//参数from：表示当前导航正要离开的路由
//参数next：调用该方法后才能进入下一个钩子。next() 直接进入下一个钩子,next(false) 中断当前的导航。next('/') 或者 next({ path: '/' }) 则会进入一个不同的地址。
router.beforeEach(async (to, from, next) => {const isAuthenticated = await localStorage.getItem('token');console.log(to.fullPath); //全路径console.log(to.path);     //路径console.log(to.name);     //路由名称console.log(to.params);   //路由参数：http://localhost:5173/FilmsDetail/123console.log(to.query);    //路由参数：http://localhost:5173/FilmsDetail?myid=123console.log(to.meta);     //路由自定义参数//meta.requireAuth表示当前请求的页面需要验证, 并且未登录if (to.meta.requireAuth && !isAuthenticated) {next(`/login?redirect=${to.path}`) //to.fullPath}else next() //如果不是请求的登陆界面，或者已经登陆过了，则直接跳转到用户请求的界面
})//路由全局拦截：在进入页面之后才进行触发拦截。
router.afterEach(async (to, form) => {//用的比较少，一般用于收集一些日志信息,做用户行为分析:例如：收集页面浏览量:PV
})export default router //导出router路由对象//导出router路由对象

main.js

import { createApp } from 'vue'
import './style.css'
import App from './App.vue'import router from "../src/router/index.js" //导入路由js var app=createApp(App)app.use(router) //注册路由组件app.mount("#app")

单独页面路由拦截

针对某个组件使用路由拦截，

例如：我需要对 Home组件单独验证用户是否登陆

VOA写法：

Home.vue组件

<template><div>我的</div>
</template><script>
export default {//进入页面(组件)之前就拦截async beforeRouteEnter(to, from, next) {const isAuthenticated = await localStorage.getItem('token');console.log(to.fullPath); //全路径console.log(to.path);     //路径console.log(to.name);     //路由名称console.log(to.params);   //路由参数：http://localhost:5173/FilmsDetail/123console.log(to.query);    //路由参数：http://localhost:5173/FilmsDetail?myid=123console.log(to.meta);     //路由自定义参数//判断是否登陆if (!isAuthenticated) {next(`/login?redirect=${to.path}`) //to.fullPath//next({name:"Login"})}else next() //如果不是请求的登陆界面，或者已经登陆过了，则直接跳转到用户请求的界面},//页面更新的时候进入：一般情况下从一个组件切换到另外一个组件，只会存在加载和卸载，那组件什么时候更新呢？//组件更新场景举列：我Films电影页面有一个电影列表，比如有如下电影：流浪地球，红海行动，湄公河，战狼，当我点击流浪地球，就会进入流浪地球的详情页面。http://localhost:5173/FilmsDetail/6616/流浪地球（注意：/6616/流浪地球 是参数，6616是电影ID,流浪地球是电影名称）//而在“流浪地球”的详情页面中的底部有一个电影推荐，或者叫“猜你喜欢”的模块，里面向我们推荐了“红海行动” //当用户在“流浪地球”的详情页面中 点击“红海行动” 页面机会跳转到 “红海行动”的详情页面中 ，“红海行动”这部电影的url地址是：http://localhost:5173/FilmsDetail/6617/红海行动 （注意：/6617/红海行动 是参数，6617是电影ID,红海行动是电影名称）//也就是说“流浪地球”与“红海行动”两部电影的URL地址是一样的，只是参数不同，这就是页面更新。async beforeRouteUpdate(to, from) {console.log(to.params)console.log(to.params.myid)},//从当前组件切换到其他组件的时候触发：例如从电影-跳转到-影院的时候触发beforeRouteLeave(to ,from){const answer=window.confirm("你数据还没有保存，确定要离开吗？")if(!answer) return false;}}
</script>

VCA写法

在单组件中vue-router中没有提供onBeforeRouteEnter的函数，无法在<script setup>中使用。但是如果要用，我们也有办法。

<template><div></div>
</template>
<script setup>
import { ref, onMounted } from 'vue'
import { useRoute, useRouter, onBeforeRouteUpdate, onBeforeRouteLeave } from 'vue-router'const route = useRoute();
const router = useRouter();//页面更新的时候进入：一般情况下从一个组件切换到另外一个组件，只会存在加载和卸载，那组件什么时候更新呢？
//组件更新场景举列：我Films电影页面有一个电影列表，比如有如下电影：流浪地球，红海行动，湄公河，战狼，当我点击流浪地球，就会进入流浪地球的详情页面。http://localhost:5173/FilmsDetail/6616/流浪地球（注意：/6616/流浪地球 是参数，6616是电影ID,流浪地球是电影名称）
//而在“流浪地球”的详情页面中的底部有一个电影推荐，或者叫“猜你喜欢”的模块，里面向我们推荐了“红海行动” 
//当用户在“流浪地球”的详情页面中 点击“红海行动” 页面机会跳转到 “红海行动”的详情页面中 ，“红海行动”这部电影的url地址是：http://localhost:5173/FilmsDetail/6617/红海行动 （注意：/6617/红海行动 是参数，6617是电影ID,红海行动是电影名称）
//也就是说“流浪地球”与“红海行动”两部电影的URL地址是一样的，只是参数不同，这就是页面更新。
onBeforeRouteUpdate((to, from) => {console.log(to.params)console.log(to.params.myid)
})//从当前组件切换到其他组件的时候触发：例如从电影-跳转到-影院的时候触发
onBeforeRouteLeave((to, from) => {const answer = window.confirm("你数据还没有保存，确定要离开吗？")if (!answer) return false;
})
</script><!-- 注意：vue-router中没有提供onBeforeRouteEnter的函数，无法在<script setup>中使用，无法在VCA中使用，如果实在要用就用如下方式来使用 -->
<script>
export default {async beforeRouteEnter(to, from, next) {const isAuthenticated = await localStorage.getItem('token');// console.log(to.fullPath); //全路径// console.log(to.path);     //路径// console.log(to.name);     //路由名称// console.log(to.params);   //路由参数：http://localhost:5173/FilmsDetail/123// console.log(to.query);    //路由参数：http://localhost:5173/FilmsDetail?myid=123// console.log(to.meta);     //路由自定义参数//判断是否登陆if (!isAuthenticated) {next(`/login?redirect=${to.path}`) //to.fullPath//next({name:"Login"})}else next() //如果不是请求的登陆界面，或者已经登陆过了，则直接跳转到用户请求的界面}
}
</script>