Javascript 显示选项取决于vue路由器的不同条件

我想根据访问组id显示选项。例如，访问组id 1、2和3可以看到newstudent和allstudent路径的选项。除此之外，用户只能看到allstudent的选项

import Vue from 'vue'
import Router from 'vue-router'
Vue.use(Router)
import Cookies from 'js-cookie'
export const constantRoutes = [
 {
    path: '/student',
    component: Layout,
    meta: { title: 'Student', icon: 'example' },
    children: [
      {
        path: '/allstudent',
        component: () => import('@/views/student/class'),
        meta: { title: 'All Student', icon: 'example' },
      },
      {
        path: '/newstudent',
        component: () => import('@/views/student/new'),
        meta: { title: 'Create Student', icon: 'example' },
        hidden: 
          Cookies.get('accessgroupid') === '1' ||
          Cookies.get('accessgroupid') === '2' ||
          Cookies.get('accessgroupid') === '3'
          ? false : true
       }
    ]
 }
]

假设我有访问组id 1，当我登录到页面时，我只看到allstudent。我需要刷新页面，以便可以看到侧边栏上显示的两个选项

我将

window.location.reload（）

放在我的login.vue中以解决问题。但我相信这可能不是解决这个问题的最好办法

隐藏部分的代码正确吗

hidden: 
Cookies.get('accessgroupid') === '1' ||
Cookies.get('accessgroupid') === '2' ||
Cookies.get('accessgroupid') === '3'
? false : true

如何才能不刷新页面以在侧边栏中呈现正确的选项

多谢各位