vue application in php page with router hotlinking

Question

I am currently building a module for a CMS (Joomla) - the frontend of this module is created with VUE 3 incl. Router. The prototype is already working and can be integrated into the CMS Module. Also the router works. If a link is clicked within the VUE app, the corresponding view is displayed. But if the user is now on a subpage of the VUE App and refreshes it (F5 / Ctrl + F5), the page is not found - i think because it exists only in the Vue Router.

To the URL structure:

domain.tld <-- This is where the Vue application is located. domain.tld/list-:id/item-:id <-- This is the URL for an ITEM

Now I know that it doesn't work like that because the webserver tries to interpret the URL which it can't because parts of it are from VUE.

Is it possible to reconfigure the vue router to work with parameters instead of a "physical" structure? from: "domain.tld/liste-:id/item-:id" to: "domain.tld?liste=:id&item=:id"

i think this could solve the issue but i dont know...

Edit: When i try to use this in the router it still works but has the same effect because yeah "appname" cannot be found by the server..

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
  },
]

Roman Odermatt · Accepted Answer · 2021-03-12 16:09:57Z

1

You can assign a controller to a wild-card, which always return you Vue app:

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

Another approach would be using a # in your URL. Everything after your # will be ignored by the server.

answered Mar 12, 2021 at 16:09

Roman Odermatt

587 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Marco · Accepted Answer · 2021-03-16 07:35:42Z

Based on the information i've got from Roman i have changed the routes and added a 404 to the router which refers to home. The views are now been loaded as "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
  }
]

If now someone tries to open a site via directlink he got redirected to home.

There might be a better solution but this works when you are using vue inside another PHP app where you are not able to configure the server.

additional info for 404: https://qdmana.com/2020/12/20201223195804176T.html

It looks that Hotlinks (directly into a view) are not possible in my scenario.

Collectives™ on Stack Overflow

vue application in php page with router hotlinking

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related