CODEWITHSUNDEEP
vue.jsvue-componentrouter
Marco
Marco

Reputation: 501

vue application in php page with router hotlinking

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

Upvotes: 0

Views: 411

Answers (2)

Marco
Marco

Reputation: 501

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.

Upvotes: 0

Roman Odermatt
Roman Odermatt

Reputation: 58

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.

Upvotes: 1

Related Questions