vue.js - 根据不同的 url 参数在根组件之间切换

Question

我正在开发一个基于 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);抛出错误。应用从未初始化

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)
  }
})