基于不同url参数在根组件之间切换

Question

我正在开发一个基于vujs的博物馆安装，它有几个客户端和一个服务器。我想在一个应用程序中开发两个应用程序，客户端和服务器。

当调用url时，我想读出参数。

https://example.com/mode=client&id=1或mode=服务器

然后我想用creatapp 加载不同的根组件

如果服务器。。const-app=Vue.createApp(服务器组件(

如果客户端。。。const-app=Vue.createApp(服务器组件(

这是个好办法吗？

如果是，我如何将clientID直接传递到根组件

编辑使用Vue.createApp(clientComponent，｛id:id，…｝(将道具传递到根组件非常简单

但目前我无法在两个不同的根组件之间进行选择。以下设置

import App from './App.vue'
import AppServer from './AppServer.vue'
const queryString = window.location.search;
const urlParams = new URLSearchParams(queryString);
const mode = urlParams.get('mode')
if (mode == "server"){
let app = createApp(AppServer);
} else {
let id = urlParams.get('id')
app = createApp(App, { id: parseInt(id) } );
}

但让app=createApp(AppServer(；引发错误。应用程序从未初始化

Answer 1

我已经实现并测试了您需要的功能。

import Vue from 'vue'
import App from './App'
import AppServer from './AppServer'
Vue.config.productionTip = false
const NotFound = {
template: '<p>Page not found</p>'
}
/* eslint-disable no-new */
new Vue({
el: '#app',
data: {
currentRoute: window.location.pathname
},
methods: {
RequestDispatcher (url) {
let urlParams = new URLSearchParams(url)
if (url.includes('mode=server')) {
return AppServer // createApp(AppServer)
} else if (url.includes('mode=client')) {
let id = urlParams.get('id')
console.log(id)
return App // createApp(App, { id: parseInt(id) })
}
}
},
computed: {
ViewComponent () {
return this.RequestDispatcher(this.currentRoute) || NotFound
}
},
render (h) {
return h(this.ViewComponent)
}
})