removed app instance hacks, content component watches route.param.content_id and reloads accordingly; changed template to <router-view/> for cms pages;

application/views/CisVue/Cms/Content.php

@@ -18,8 +18,8 @@ if(defined('CIS4')){
 }
 ?>
 
-<div id="cms">
-<?php echo (isset($content_id) ? '<cms-content :content_id="'.$content_id.'" :version="'.$version.'" :sprache="'.$sprache.'" :sichtbar="'.$sichtbar.'" />' : '<cms-news/>'); ?>
+<div ref="cmsContainer" id="cms">
+	<?php echo (isset($content_id) ? '<router-view ref="cms" :content_id="'.$content_id.'" :version="'.$version.'" :sprache="'.$sprache.'" :sichtbar="'.$sichtbar.'" />' : '<router-view ref="cms" />'); ?>
 </div>
 
 <?php

public/js/apps/Cis/Cms.js

@@ -8,7 +8,6 @@ import {setScrollbarWidth} from "../../helpers/CssVarCalcHelpers";
 import FhcApi from "../../plugin/FhcApi";
 
 const ciPath = FHC_JS_DATA_STORAGE_OBJECT.app_root.replace(/(https:|)(^|\/\/)(.*?\/)/g, '') + FHC_JS_DATA_STORAGE_OBJECT.ci_router;
-console.log('ciPath', ciPath)
 const router = VueRouter.createRouter({
 	history: VueRouter.createWebHistory(`/${ciPath}/CisVue/Cms/`),
 	routes: [
@@ -16,7 +15,7 @@ const router = VueRouter.createRouter({
 			path: `/content/:content_id`,
 			name: 'Content',
 			component: CmsContent,
-			props: true
+			props: (route) => ({ content_id: route.params.content_id })
 		},
 		{
 			path: `/news`,
@@ -31,8 +30,7 @@ const app = Vue.createApp({
 	name: 'CmsApp',
 	data() {
 		return {
-			instance: null,
-			interceptHandler: this.intercept//.bind(this)
+			interceptHandler: this.intercept
 		}
 	},
 	components: {
@@ -41,36 +39,33 @@ const app = Vue.createApp({
 	},
 	methods: {
 		intercept(e) {
+			// TODO: maybe a more sophisticated menu link click detection is possible?
 			if (e.target.tagName === "A" && e.target.pathname?.includes(ciPath) && e.target.pathname.includes('Cms/content')) {
 				const pathParts = e.target.pathname.split('/').filter(Boolean);
 				const idString = pathParts[pathParts.length - 1];
 				const content_id = idString && !isNaN(Number(idString)) ? idString : null; // only return id if it is a number string since the path might contain invalid elements
 
 				e.preventDefault() // prevents normal browser page load
-                
-				this.$router.push({ // add new content id to browser history
+				this.$router.push({
 					name: 'Content',
 					params: {
 						content_id
 					}
 				})
 
-                // load and show new content from id without reloading page with menu overhead etc.
-                // from a generic reload function required by every affected child component
-				this.instance.subTree.type.methods.reload(
-					content_id,
-					this.instance.appContext.config.globalProperties.$fhcApi,
-					this.instance.subTree.component.proxy // this pointer of component reloading and setting its own content
-				)
-
 			} else if(e.target.tagName === "A" && e.target.pathname?.includes(ciPath) && e.target.pathname.includes('Cms/news')) {
 				//handle news content
+				
+				e.preventDefault() // prevents normal browser page load
+				this.$router.push({
+					name: 'News',
+
+				})
 			}
 
 		}
 	},
 	mounted() {
-		this.instance = Vue.getCurrentInstance()
 		document.querySelectorAll("#cms [data-confirm]").forEach((el) => {
 			el.addEventListener("click", (evt) => {
 				evt.preventDefault();
@@ -93,10 +88,7 @@ const app = Vue.createApp({
 				FHC_JS_DATA_STORAGE_OBJECT.app_root
 			);
 		});
-
-
 		document.addEventListener("click", this.interceptHandler, {capture: true, passive: false})
-
 	},
 	unmounted() {
 		document.removeEventListener('click', this.interceptHandler)
@@ -105,6 +97,8 @@ const app = Vue.createApp({
 
 setScrollbarWidth();
 
+app.use(router);
+app.use(FhcApi);
 app.use(primevue.config.default, { zIndex: { overlay: 9999 } });
 app.use(Phrasen);
 app.mount("#cms");

public/js/components/Cis/Cms/Content.js

@@ -1,13 +1,11 @@
 import raum_contentmittitel from './Content_types/Raum_contentmittitel.js'
 import general from './Content_types/General.js'
 
-
 export default {
 	name: "ContentComponent",
-	
 	props: {
 		content_id: {
-			type: Number,
+			type: [Number, String],
 			required: true,
 		},
 		version: {
@@ -26,25 +24,12 @@ export default {
 	data() {
 		return {
 			content: null,
-			content_idInternal: this.content_id
+			content_id_internal: this.content_id
 		};
 	},
 	methods: {
-		reload(id, api, context) {
-			// to be called from app bound interceptor function that has access to the same api, but not via this
-			context.content_idInternal = id
-			this.load(api, context)
-		},
-		load(apiParam = null, context = this) {
-			const api = apiParam ?? context.$fhcApi 
-			api.factory.cms.content(context.content_idInternal, context.version, context.sprache, context.sichtbar).then(res => {
-				context.content = res.data.content;
-				context.content_type = res.data.type;
-
-			});
-		},
 		fetchContent(){
-			return this.$fhcApi.factory.cms.content(this.content_id, this.version, this.sprache, this.sichtbar).then(res => {
+			return this.$fhcApi.factory.cms.content(this.content_id_internal, this.version, this.sprache, this.sichtbar).then(res => {
 				this.content = res.data.content;
 				this.content_type = res.data.type;
 			});
@@ -54,6 +39,10 @@ export default {
 		sprache: function(sprache){
 			this.fetchContent();
 		},
+		'$route.params.content_id'(newVal) {
+			this.content_id_internal = newVal
+			this.fetchContent();
+		}
 	},
 	computed: {
 		sprache(){
@@ -69,17 +58,13 @@ export default {
 		},
 	},
 	created() {
-		this.$fhcApi.factory.cms.content(this.content_id, this.version, this.sprache, this.sichtbar).then(res => {
-			this.content = res.data.content;
-			this.content_type = res.data.type;
-		});
+		this.fetchContent();
 	},
 	mounted() {
-
 	},
 	template: /*html*/ `
     <!-- div that contains the content -->
-    <component ref="content" :is="computeContentType" v-if="content" :content="content" :content_id="content_idInternal" />
+    <component ref="content" :is="computeContentType" v-if="content" :content="content" :content_id="content_id_internal" />
     <p v-else>No content is available to display</p>
     `,
 };