vue中动态路由登录问题

import Vue from 'vue';

import VueRouter  from 'vue-router';
import Layout from '@/views/layout/layout.vue'
import Login from '@/views/login/index.vue'
import Home from '@/views/home/home.vue'
import ProM from '@/views/proManagement/index.vue'
import Order from "@/views/order/order.vue"
import Adv from '@/views/advertisement/index.vue'
import System from '@/views/system/index.vue'
Vue.use(VueRouter)
const routes =[
    {
        path: '/',
        component: Layout,
        meta:{
            isLogin:true,
            title:"首页"
        },
        children: [
            {
                path:'/',
                name:'home',
                component:Home
            },
            {
                path: '/pro',
                name: 'pro',
                component: ProM
            },
            {
                path: '/order',
                name: 'order',
                component: Order
            },
            {
                path: '/adv',
                name: 'adv',
                component: Adv
            }
            ,
            {
                path: '/system',
                name: 'system',
                component: System
            }
        ]
    },
    {
        path: '/login',
        name: 'login',
        component: Login
    }
];

const router = new VueRouter({
    mode: 'history',
    // base: createWebHistory(),
    routes
})

router.beforeEach((to,from,next)=>{
    console.log("进入页面");
    if(to.matched.some(ele=>ele.meta.isLogin)){  //  需要登录
        console.log("要登录");
        if(window.localStorage.getItem("id")){
            next()
        }else{
            next("/login")
        }
    }else{
        next()
    }
})
export default router