route lazy loading + route naming improvements

vue3/src/components/display/HorizontalMealPlanWindow.vue

@@ -136,7 +136,7 @@ onMounted(() => {
 
 function clickMealPlan(plan: MealPlan){
     if(plan.recipe){
-        router.push( {name: 'view_recipe', params: {id: plan.recipe.id}})
+        router.push( {name: 'RecipeViewPage', params: {id: plan.recipe.id}})
     }
 }
 

vue3/src/components/display/NavigationDrawerContextMenu.vue

@@ -11,7 +11,7 @@
         </v-list-item>
     </template>
 
-    <template v-if="route.name == 'view_mealplan'">
+    <template v-if="route.name == 'MealPlanPage'">
         <v-divider></v-divider>
         <v-list-subheader>{{$t('Settings')}}</v-list-subheader>
         <v-list-item>

vue3/src/components/display/RecipeCard.vue

@@ -1,14 +1,14 @@
 <template>
     <template v-if="!props.loading">
 
-        <router-link :to="{name: 'view_recipe', params: {id: props.recipe.id}}">
+        <router-link :to="{name: 'RecipeViewPage', params: {id: props.recipe.id}}">
             <recipe-image :style="{height: props.height}" :recipe="props.recipe" rounded="lg" class="mr-3 ml-3">
 
             </recipe-image>
         </router-link>
         <div class="ml-3">
             <div class="d-flex ">
-                <div class="flex-grow-1 cursor-pointer" @click="router.push({name: 'view_recipe', params: {id: props.recipe.id}})">
+                <div class="flex-grow-1 cursor-pointer" @click="router.push({name: 'RecipeViewPage', params: {id: props.recipe.id}})">
                     <p class="font-weight-bold mt-2">{{ props.recipe.name }}</p>
                 </div>
                 <div class="mt-1">