我正在开发一个基于 vujs 的博物馆装置,有多个客户端和一个服务器。我想在一个应用程序中开发客户端和服务器这两个应用程序。
调用url时想读出参数
https://example.com/mode=client&id=1或模式=服务器
然后我想用creatapp加载不同的根组件
如果服务器 .. const app = Vue.createApp(serverComponent)
如果客户端 ... const app = Vue.createApp(serverComponent)
这样好吗?
如果是这样,如何将 clientID 直接传递给根组件
已编辑 使用 Vue.createApp(clientComponent, {id:id,...}) 将 Prop 传递给根组件很简单
但目前我无法在 2 个不同的根组件之间进行选择。 以下设置
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);抛出错误。应用从未初始化
最佳答案
我已经实现并测试了您需要的功能。
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)
}
})
关于vue.js - 根据不同的 url 参数在根组件之间切换,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/70910169/