• Vue3.0路由拦截

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

    index.js路由器

    1. import { createRouter, createWebHistory } from "vue-router"; //导入vue-router路由模块,createWebHashHistor函数
    2.  
    3. const routes = [
    4.     {
    5.         path: "/",  //路径: 
    6.         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内容
    7.         // redirect: {
    8.         //     name: "Films" //重定向到路由名称为Tabbar的路由中，这样当浏览器输入的是：http://localhost:5173/ 则会重定向跳转到 http://localhost:5173/Films
    9.         // }
    10.  
    11.     },
    12.     {
    13.         path: "/Navbar",  //路径：导航栏
    14.         name: "Navbar",
    15.         //当路由被触发时，该组件才会被异步加载，举列：打开页面就不会加载所有的组件，而是根据当前页面需要的组件进行异步加载
    16.         //这样可以减少初始加载时间，提升用户体验，同时也节省了不必要的资源消耗。
    17.         component: () => import("../views/Navbar.vue")
    18.  
    19.     },
    20.     {
    21.         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参数
    22.         name: "FilmsDetail",  //路由名称，如果不指定name 默认的name为default
    23.  
    24.         //当路由被触发时，该组件才会被异步加载，举列：打开页面就不会加载所有的组件，而是根据当前页面需要的组件进行异步加载
    25.         //这样可以减少初始加载时间，提升用户体验，同时也节省了不必要的资源消耗。
    26.         component: () => import("../views/FilmsDetail.vue")
    27.     },
    28.     {
    29.         path: "/Tabbar",  //路径：底部选项卡
    30.         name: "Tabbar",  //路由名称，如果不指定name 默认的name为default
    31.  
    32.         //当路由被触发时，该组件才会被异步加载，举列：打开页面就不会加载所有的组件，而是根据当前页面需要的组件进行异步加载
    33.         //这样可以减少初始加载时间，提升用户体验，同时也节省了不必要的资源消耗。
    34.         component: () => import("../views/Tabbar.vue"),
    35.  
    36.     },
    37.     {
    38.         path: "/Films",  //路径:电影
    39.         name: "Films",  //路由名称，如果不指定name 默认的name为default
    40.  
    41.         //当路由被触发时，该组件才会被异步加载，举列：打开页面就不会加载所有的组件，而是根据当前页面需要的组件进行异步加载
    42.         //这样可以减少初始加载时间，提升用户体验，同时也节省了不必要的资源消耗。
    43.         component: () => import("../views/Films.vue"),
    44.         children: [       //通过children配置子级路由
    45.             {
    46.                 path: 'NowPlaying', //可以写成：'/Films/NowPlaying' 但是不要写成 '/NowPlaying'(正在热映)
    47.                 name: "NowPlaying",
    48.                 component: () => import("../views/NowPlaying.vue")
    49.             },
    50.             {
    51.                 path: 'ComingSoon', //可以写成：'/Films/ComingSoon' 但是不要写成 '/ComingSoon'(即将上映)
    52.                 component: () => import("../views/ComingSoon.vue")
    53.             },
    54.             {
    55.                 //为什么在子路由中添加一个Films路由？：答：因为在进入Films组件后就需要立即加载NowPlaying组件的内容。:注意：这里需要加斜杆/Films  ；
    56.                 //从app.vue组件中进入Films组件的时候，跳转的地址是：http://localhost:5173/Films，这时候就找到了顶级路由/Films，到然进入子级路由children，发现了后/Films需要跳转到/Films/NowPlaying
    57.                 path: '/Films',
    58.                 redirect: "/Films/NowPlaying"
    59.             },
    60.  
    61.         ]
    62.     },
    63.     {
    64.         path: "/Cinemas",  //路径:影院
    65.         name: "Cinemas",   //路由名称，如果不指定name 默认的name为default
    66.  
    67.         //当路由被触发时，该组件才会被异步加载，举列：打开页面就不会加载所有的组件，而是根据当前页面需要的组件进行异步加载
    68.         //这样可以减少初始加载时间，提升用户体验，同时也节省了不必要的资源消耗。
    69.         component: () => import("../views/Cinemas.vue")
    70.     },
    71.     {
    72.         path: "/Home",  //路径:我的
    73.         name: "Home",   //路由名称，如果不指定name 默认的name为default
    74.  
    75.         //当路由被触发时，该组件才会被异步加载，举列：打开页面就不会加载所有的组件，而是根据当前页面需要的组件进行异步加载
    76.         //这样可以减少初始加载时间，提升用户体验，同时也节省了不必要的资源消耗。
    77.         component: () => import("../views/Home.vue"),
    78.         meta: //加一个自定义参数：里面的参数随便我们定
    79.         {
    80.             requireAuth: true,   // 对当前路由路径做一个标记，代表进入这个页面需要登陆才能进。用于在router.beforeEach里面做登陆验证的时候，判断这个requireAuth参数是否为true，为true则需要登陆才能进入
    81.             aaa: "wowow"
    82.         }
    83.     },
    84.     {
    85.         path: "/Login",  //登陆
    86.         name: "Login",   //路由名称，如果不指定name 默认的name为default
    87.         component: () => import("../views/Login.vue"),
    88.     },
    89.     {
    90.         path: "/:pathMatch(.*)",  //404错误
    91.         name: "NotFound",  //路由名称，如果不指定name 默认的name为default
    92.         component: () => import("../views/NotFound.vue")
    93.     }
    94.  
    95. ]
    96.  
    97. //创建路由对象
    98. const router = createRouter({
    99.     history: createWebHistory(),     //这种方式基于浏览器 history API 的路由模式，url的样式是：http://localhost:5173/list
    100.     routes: routes,
    101. })
    102.  
    103. //路由全局拦截：在进入页面之前就进行拦截。可以用于做用户登陆验证
    104. //参数to：  表示即将进入的目标路由对象
    105. //参数from：表示当前导航正要离开的路由
    106. //参数next：调用该方法后才能进入下一个钩子。next() 直接进入下一个钩子,next(false) 中断当前的导航。next('/') 或者 next({ path: '/' }) 则会进入一个不同的地址。
    107. router.beforeEach(async (to, from, next) => {
    108.     const isAuthenticated = await localStorage.getItem('token');
    109.  
    110.     console.log(to.fullPath); //全路径
    111.     console.log(to.path);     //路径
    112.     console.log(to.name);     //路由名称
    113.     console.log(to.params);   //路由参数：http://localhost:5173/FilmsDetail/123
    114.     console.log(to.query);    //路由参数：http://localhost:5173/FilmsDetail?myid=123
    115.     console.log(to.meta);     //路由自定义参数
    116.  
    117.  
    118.     //meta.requireAuth表示当前请求的页面需要验证, 并且未登录
    119.     if (to.meta.requireAuth && !isAuthenticated) {
    120.         next(`/login?redirect=${to.path}`) //to.fullPath
    121.     }
    122.     else next() //如果不是请求的登陆界面，或者已经登陆过了，则直接跳转到用户请求的界面
    123. })
    124.  
    125. //路由全局拦截：在进入页面之后才进行触发拦截。
    126. router.afterEach(async (to, form) => {
    127.     //用的比较少，一般用于收集一些日志信息,做用户行为分析:例如：收集页面浏览量:PV
    128. })
    129.  
    130. export default router //导出router路由对象//导出router路由对象

    main.js ：路由注册

    1. import { createApp } from 'vue'
    2. import './style.css'
    3. import App from './App.vue'
    4.  
    5. import router from "../src/router/index.js" //导入路由js 
    6.  
    7. var app=createApp(App)
    8.  
    9. app.use(router) //注册路由组件
    10.  
    11. app.mount("#app")

    单独页面路由拦截

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

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

    VOA写法：

    Home.vue组件

    1. <template>
    2.     <div>我的div>
    3. template>
    4.  
    5. <script>
    6. export default {
    7.     //进入页面(组件)之前就拦截
    8.     async beforeRouteEnter(to, from, next) {
    9.         const isAuthenticated = await localStorage.getItem('token');
    10.  
    11.         console.log(to.fullPath); //全路径
    12.         console.log(to.path);     //路径
    13.         console.log(to.name);     //路由名称
    14.         console.log(to.params);   //路由参数：http://localhost:5173/FilmsDetail/123
    15.         console.log(to.query);    //路由参数：http://localhost:5173/FilmsDetail?myid=123
    16.         console.log(to.meta);     //路由自定义参数
    17.  
    18.  
    19.         //判断是否登陆
    20.         if (!isAuthenticated) {
    21.             next(`/login?redirect=${to.path}`) //to.fullPath
    22.             //next({name:"Login"})
    23.         }
    24.         else next() //如果不是请求的登陆界面，或者已经登陆过了，则直接跳转到用户请求的界面
    25.     },
    26.  
    27.  
    28.     //监听路由参数发生变化
    29.  
    30.     //组件需要更新场景举列：我Films电影页面有一个电影列表，比如有如下电影：流浪地球，红海行动，湄公河，战狼，当我点击流浪地球，就会进入流浪地球的详情页面。http://localhost:5173/FilmsDetail/6616/流浪地球（注意：/6616/流浪地球 是参数，6616是电影ID,流浪地球是电影名称）
    31.     //而在“流浪地球”的详情页面中的底部有一个电影推荐，或者叫“猜你喜欢”的模块，里面向我们推荐了“红海行动” 
    32.     //当用户在“流浪地球”的详情页面中 点击“红海行动” 页面机会跳转到 “红海行动”的详情页面中 ，“红海行动”这部电影的url地址是：http://localhost:5173/FilmsDetail/6617/红海行动 （注意：/6617/红海行动 是参数，6617是电影ID,红海行动是电影名称）
    33.     //也就是说“流浪地球”与“红海行动”两部电影的URL地址是一样的，只是参数不同，这就是页面更新。
    34.  
    35.     //电影：http://localhost:5173/FilmsDetail/6616/流浪地球 和 http://localhost:5173/FilmsDetail/6617/红海行动  这两个电影的url是一样的，都是http://localhost:5173/FilmsDetail 不同的只是参数不同，一个是/6616/流浪地球，另外一个是/6617/红海行动
    36.     //因为只是参数更新，就不会存在卸载组件，所以onMounted只会执行一次，当参数发生更新不会再次执行onMounted钩子函数
    37.     //假设我们在onMounted钩子函数中可能做了ajax去后台请求这部电影的数据,然后将数据展示在这个界面上，如果onMounted钩子函数没有被执行，那么当前界面中的展示的内容也不会被刷新）
    38.     watch: {
    39.         "$route.params": function () {
    40.             const myid = this.$route.params.myid;
    41.             const myname = this.$route.params.myname;
    42.  
    43.             //这里可以发起ajax请求，根据myid,或者myname等信息后后台获取电影数据然后填充到DOM中，实现页面重新渲染新的内容
    44.             //const currentFilm =await axios.get("https://m.maizuo.com/gateway?filmId=6616&k=2465358")
    45.         }
    46.     },
    47.  
    48.  
    49.     //既然现在我们已经引入了路由机制了，所以我们可以用beforeRouteUpdate来替代watch的监听路由参数的变化。
    50.  
    51.     //beforeRouteUpdate：当一个组件复用时，传递的参数发生变化就会触发这个钩子函数
    52.  
    53.     //组件需要更新场景举列：我Films电影页面有一个电影列表，比如有如下电影：流浪地球，红海行动，湄公河，战狼，当我点击流浪地球，就会进入流浪地球的详情页面。http://localhost:5173/FilmsDetail/6616/流浪地球（注意：/6616/流浪地球 是参数，6616是电影ID,流浪地球是电影名称）
    54.     //而在“流浪地球”的详情页面中的底部有一个电影推荐，或者叫“猜你喜欢”的模块，里面向我们推荐了“红海行动” 
    55.     //当用户在“流浪地球”的详情页面中 点击“红海行动” 页面机会跳转到 “红海行动”的详情页面中 ，“红海行动”这部电影的url地址是：http://localhost:5173/FilmsDetail/6617/红海行动 （注意：/6617/红海行动 是参数，6617是电影ID,红海行动是电影名称）
    56.     //也就是说“流浪地球”与“红海行动”两部电影的URL地址是一样的，只是参数不同，这就是页面更新。
    57.  
    58.     //电影：http://localhost:5173/FilmsDetail/6616/流浪地球 和 http://localhost:5173/FilmsDetail/6617/红海行动  这两个电影的url是一样的，都是http://localhost:5173/FilmsDetail 不同的只是参数不同，一个是/6616/流浪地球，另外一个是/6617/红海行动
    59.     //因为只是参数更新，就不会存在卸载组件，所以onMounted只会执行一次，当参数发生更新不会再次执行onMounted钩子函数
    60.     //假设我们在onMounted钩子函数中可能做了ajax去后台请求这部电影的数据,然后将数据展示在这个界面上，如果onMounted钩子函数没有被执行，那么当前界面中的展示的内容也不会被刷新）
    61.     async beforeRouteUpdate(to, from) {
    62.         myid.value = to.params.myid
    63.         myname.value = to.params.myname;
    64.  
    65.         //这里可以发起ajax请求，根据myid,或者myname等信息后后台获取电影数据然后填充到DOM中，实现页面重新渲染新的内容
    66.         //const currentFilm =await axios.get("https://m.maizuo.com/gateway?filmId=6616&k=2465358")
    67.     },
    68.  
    69.     //从当前组件切换到其他组件的时候触发：例如从电影-跳转到-影院的时候触发
    70.     beforeRouteLeave(to, from) {
    71.         const answer = window.confirm("你数据还没有保存，确定要离开吗？")
    72.         if (!answer) return false;
    73.     }
    74. }
    75. script>

    VCA写法

    在单组件中vue-router中没有提供onBeforeRouteEnter的函数，无法在