php 页面中的 vue 应用程序带有路由器热链接

Question

我目前正在为 CMS (Joomla) 构建一个模块 - 该模块的前端是使用 VUE 3 创建的，包括。路由器。该原型已经在运行，可以集成到 CMS 模块中。路由器也可以工作。如果在 VUE 应用程序中单击 link，则会显示相应的视图。但是如果用户现在在 VUE 应用程序的子页面上并刷新它 (F5 / Ctrl + F5)，则找不到该页面 - 我认为是因为它只存在于 Vue 路由器中。

到URL结构：

domain.tld <-- 这是 Vue 应用程序所在的位置。 domain.tld/list-:id/item-:id <-- 这是 ITEM

的 URL

现在我知道它不能像那样工作，因为网络服务器试图解释 URL 它不能，因为它的一部分来自 VUE。

是否可以重新配置 vue 路由器以使用参数而不是“物理”结构？来自：“域名。tld/liste-:id/item-:id” 至：“domain.tld?liste=:id&item=:id”

我认为这可以解决问题，但我不知道...

编辑：当我尝试在路由器中使用它时，它仍然有效，但效果相同，因为是的，服务器找不到“appname”..

const routes = [
  {
    path: '/',
    name: 'Home',
    component: Home
  },
  {
    path: '/appname?playlist=:id',
    name: 'PlaylistDetails',
    component: PlaylistDetails,
    props: true
  },
  {
    path: '/appname?playlist=:id&video=:vid',
    name: 'Player',
    component: Player,
    props:true
  },
]

Answer 1

您可以将控制器分配给通配符，这总是 return 您的 Vue 应用程序：

$router->addMap('/domain.tld/*', 'VueController');

另一种方法是在 URL 中使用 #。服务器将忽略 # 之后的所有内容。

Answer 2

根据我从 Roman 那里得到的信息，我更改了路由并向指向家的路由器添加了 404。视图现在加载为“url params”。

const routes = [
  {
    path: '/',
    name: 'Home',
    component: Home
  },
  {
    path: '/#appname?playlist-:id',
    name: 'PlaylistDetails',
    component: PlaylistDetails,
    props: true
  },
  {
    path: '/#appname?playlist-:id&video=:vid',
    name: 'Player',
    component: Player,
    props:true
  },
  {
// Match all paths vue2 Use * vue3 Use /:pathMatch(.*)* or /:pathMatch(.*) or /:catchAll(.*)
    path: "/:pathMatch(.*)*",
    name: "404",
    component: Home
  }
]

如果现在有人试图通过直接链接打开网站，他会被重定向到主页。

可能有更好的解决方案，但当您在另一个无法配置服务器的 PHP 应用程序中使用 vue 时，此方法有效。

404 的其他信息： https://qdmana.com/2020/12/20201223195804176T.html

看起来热链接（直接进入视图）在我的场景中是不可能的。

php 页面中的 vue 应用程序带有路由器热链接

vue application in php page with router hotlinking

router

vue.js

vue-component