"TypeError: next is not a function" in the router.js file of my vue 3 project when trying to apply navigation guards?

"TypeError: next is not a function" in the router.js file of my vue 3 project when trying to apply navigation guards?

我不明白为什么我不认识下一个函数,而我关注了一个类似的视频来实现这个并且它没有错误

我不明白为什么我不认识下一个功能,而我关注了一个类似的视频来实现这个并且它没有错误

我不明白为什么我不认识下一个功能,而我关注了一个类似的视频来实现这个并且它没有错误

import Dashboard from "./Pages/Dashboard.vue";
import Customers from "./Pages/Customers.vue";
import EditProfile from "./Pages/EditProfile.vue";
import Insurance from "./Pages/Insurance.vue";
import Activations from "./Pages/Activations.vue";
import Login from "./Pages/Login.vue"
import ForgotPassword from "./Pages/ForgotPassword.vue"

import MyDashboard from "./Pages_cus/MyDashboard.vue";
import MyActivations from "./Pages_cus/MyActivations.vue";
import MyEditProfile from './Pages_cus/MyEditProfile.vue';
import NotFound from './Pages/NotFound.vue';
import NetworkError from './Pages/NetworkError.vue'

import { createRouter, createWebHistory } from "vue-router";

const routes = [
    {
        name: "MyDashboard",
        component: MyDashboard,
        path: "/my-dashboard",
        meta: {
            requiresAuth: true,
        }
    },
    {
        name: "MyActivations",
        component: MyActivations,
        path: "/my-activations",
    },
    {
        name: "MyEditProfile",
        component: MyEditProfile,
        path: "/my-edit-profile",
    },
    {
        name: "Dashboard",
        component: Dashboard,
        path: "/dashboard",
        meta: {
            requiresAuth: true,
        }
    },
    {
        name: "Customers",
        component: Customers,
        path: "/customers",
    },
    {
        name: "EditProfile",
        component: EditProfile,
        path: "/edit-profile",
    },
    {
        name: "Insurance",
        component: Insurance,
        path: "/insurance",
    },
    {
        name: "Activations",
        component: Activations,
        path: "/activations",
    },
    {
        name: "Login",
        component: Login,
        path: "/",
        meta: {
            requiresAuth: true,
        }
    },
    {
        name: "ForgotPassword",
        component: ForgotPassword,
        path: "/forgot-password",
    },
    {
        name: "404Resource",
        component: NotFound,
        path: '/404/:resource',
        props:true
    },
    {
        name: "NetworkError",
        component: NetworkError,
        path: '/network-error'
    },
    {
        name: "NotFound",
        component: NotFound,
        path: '/:catchAll(.*)'
    },
    
];

const router = createRouter({
    history: createWebHistory(),
    routes,
});

router.beforeEach((to, next)=>{
    if (to.matched.some(record => record.meta.requiresAuth)) {
        if (localStorage.getItem('token') == null) {
            console.log('Hello JS')
          next({
            path: '/',
            params: { nextUrl: to.fullPath }
          }) // I get the error at this level it doesn't recognise next as a function
        }
        else{
            next();
        }
    } 
    else {
          next()
    }
    })

export default router;

[Screenshot of code in VS code][1]
[Screenshot of code in browser

<!-- begin snippet: js hide: false console: true babel: false -->

<div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre><code>    import Dashboard from "./Pages/Dashboard.vue";
    import Customers from "./Pages/Customers.vue";
    import EditProfile from "./Pages/EditProfile.vue";
    import Insurance from "./Pages/Insurance.vue";
    import Activations from "./Pages/Activations.vue";
    import Login from "./Pages/Login.vue"
    import ForgotPassword from "./Pages/ForgotPassword.vue"

    import MyDashboard from "./Pages_cus/MyDashboard.vue";
    import MyActivations from "./Pages_cus/MyActivations.vue";
    import MyEditProfile from './Pages_cus/MyEditProfile.vue';
    import NotFound from './Pages/NotFound.vue';
    import NetworkError from './Pages/NetworkError.vue'

    import { createRouter, createWebHistory } from "vue-router";

    const routes = [
        {
            name: "MyDashboard",
            component: MyDashboard,
            path: "/my-dashboard",
            meta: {
                requiresAuth: true,
            }
        },
        {
            name: "MyActivations",
            component: MyActivations,
            path: "/my-activations",
        },
        {
            name: "MyEditProfile",
            component: MyEditProfile,
            path: "/my-edit-profile",
        },
        {
            name: "Dashboard",
            component: Dashboard,
            path: "/dashboard",
            meta: {
                requiresAuth: true,
            }
        },
        {
            name: "Customers",
            component: Customers,
            path: "/customers",
        },
        {
            name: "EditProfile",
            component: EditProfile,
            path: "/edit-profile",
        },
        {
            name: "Insurance",
            component: Insurance,
            path: "/insurance",
        },
        {
            name: "Activations",
            component: Activations,
            path: "/activations",
        },
        {
            name: "Login",
            component: Login,
            path: "/",
            meta: {
                requiresAuth: true,
            }
        },
        {
            name: "ForgotPassword",
            component: ForgotPassword,
            path: "/forgot-password",
        },
        {
            name: "404Resource",
            component: NotFound,
            path: '/404/:resource',
            props:true
        },
        {
            name: "NetworkError",
            component: NetworkError,
            path: '/network-error'
        },
        {
            name: "NotFound",
            component: NotFound,
            path: '/:catchAll(.*)'
        },
        
    ];

    const router = createRouter({
        history: createWebHistory(),
        routes,
    });

    router.beforeEach((to, next)=>{
        if (to.matched.some(record => record.meta.requiresAuth)) {
            if (localStorage.getItem('token') == null) {
                console.log('Hello JS')
              next({
                path: '/',
                params: { nextUrl: to.fullPath }
              }) // I get the error at this level it doesn't recognise next as a function
            }
            else{
                next();
            }
        } 
        else {
              next()
        }
        })

    export default router;
    <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
  [1]: https://i.stack.imgur.com/Y9D08.png
  [2]: https://i.stack.imgur.com/n9ERj.png

next 是 beforeEach 函数的第三个参数,所以它应该是:

beforeEach((to, from, next)) => {...

虽然您在这里正确使用了 next 函数(确保它只被调用一次),但它目前已被弃用:https://github.com/vuejs/rfcs/blob/master/active-rfcs/0037-router-return-guards.md#motivation

现在建议使用 1 或 2 个参数和 return 布尔值来指示是否继续,或重定向到的路由:

router.beforeEach((to)=>{
    if (to.matched.some(record => record.meta.requiresAuth) 
        && localStorage.getItem('token') == null) {
          //redirect
          return {
            name: '/',
            query: { nextUrl: to.fullPath }
          } 
    } 

    return true; //proceed (equivalent of next())
});