Vue Router Navigation Guards

I've successfully exposed my permissions via spatie/permissions and also used the v-if directive to show components if you are authorized . Now my issue is how can i also guard my routes in the vue router (routes.js) supposing a particular individual has no rights to view a certain page despite typing the URL in the address bar (in this case probably they were termed unauthorized). I've used this script below to expose it to my vue models

 <script>
         window.user =@json([
             'user' =>auth()->user(),
             'roles' =>auth()->user()->roles,
             'permissions' =>auth()->user()->getAllPermissions()
         ])
  </script>