[Vue.js] Problema con rotte

[fermat]

ciao!

ho un strano problema con le rotte e vue.js.
l'applicazione si trova in una sottocartella

allora:

• se vado su https://www.sito.it/dir non ho problemi
• se su https://www.sito.it/dir faccio il refresh non ho problemi
• se vado su https://www.sito.it/dir/aggiungi dal menu della pagina non ho problemi

ma:

• se metto direttamente https://www.sito.it/dir/aggiungi nella barra degli indirizzi ottengo un Not Found
• se vado su https://www.sito.it/dir/aggiungi da menu e poi faccio un refresh ottengo un Not Found
• in verità questo comportamento ce l'ho su tutte le rotte tranne che quella principale

avete idea del perchè???

[alka]

ho un strano problema con le rotte e vue.js. [...]
avete idea del perchè???

Le librerie per lo sviluppo di SPA (Single Page Application), qual è Vue.JS, di norma gestiscono il routing in modo particolare.

Quantomeno dovresti indicare qual è la modalità di utilizzo che stai facendo della libreria Vue (la importi come script nel browser? usi Node?) e come hai configurato il sistema di routing nella tua applicazione (in breve, il codice sorgente interessato).

In assenza di queste informazioni, non è chiaro quale sia la situazione e la presenza di comportamenti anomali è del tutto ammissibile.

Ciao!

[fermat]

Le librerie per lo sviluppo di SPA (Single Page Application), qual è Vue.JS, di norma gestiscono il routing in modo particolare.

Quantomeno dovresti indicare qual è la modalità di utilizzo che stai facendo della libreria Vue (la importi come script nel browser? usi Node?) e come hai configurato il sistema di routing nella tua applicazione (in breve, il codice sorgente interessato).

In assenza di queste informazioni, non è chiaro quale sia la situazione e la presenza di comportamenti anomali è del tutto ammissibile.

Ciao!

ciao!

uso node, e per creare la build uso il classico:

npm run build

questo il mio vue.config.js:

module.exports = {
    publicPath: process.env.NODE_ENV === 'production' ? '/sport' : '/sport'
}

questo il file delle rotte router.js:

import {createRouter, createWebHistory} from 'vue-router';
import Dashboard from './components/Dashboard.vue';
import Allenamenti from "@/components/Allenamenti";
import AggiungiAllenamento from "@/components/AggiungiAllenamento";
import Pesi from "@/components/Pesi";
import AggiungiPeso from '@/components/AggiungiPeso';

const routes = [
    {
        path: '/',
        name: 'dashboard',
        component: Dashboard,
    },
    {
        path: '/allenamenti',
        name: 'allenamenti',
        component: Allenamenti,
    },
    {
        path: '/aggiungi/:id?/:dup?',
        name: 'aggiungi',
        component: AggiungiAllenamento,
    },
    {
        path: '/pesi',
        name: 'pesi',
        component: Pesi,
    },
    {
        path: '/aggiungi_peso/:id?/:dup?',
        name: 'aggiungi_peso',
        component: AggiungiPeso,
    },
];

const router = createRouter({
    history: createWebHistory(),
    routes
});

export default router;

può servirvi altro???

[alka]

questo il file delle rotte router.js:

Hai fatto un confronto con le parti aggiuntive che puoi trovare in questo esempio?

Premetto che detesto le SPA e questi "meccanismi".

[fermat]

Hai fatto un confronto con le parti aggiuntive che puoi trovare in questo esempio?

Premetto che detesto le SPA e questi "meccanismi".

però io sto problema lo sto avendo solo con vue.js.

con angular non ho questi problemi.
cioè se in angular vado direttamente su https://www.sito.it/admin2/#/colori (a parte il dominio, il link è reale) ci vado senza problemi.

su questo progetto in vue.js invece se vado su https://www.sito.com/sir/aggiungi mi dice che la pagina non è stat trovata.
non conosco bene vue.js, però sinceramente lo trovo strano

cmq in giornata do un'occhiata al link che mi hai girato e ti dico!

[alka]

però io sto problema lo sto avendo solo con vue.js.
con angular non ho questi problemi.

Noterai che i due link non hanno lo stesso formato.

Se usi un URL tipo https://www.sito.com/sir/aggiungi, sarà il tuo server a cercare di risolverlo caricando qualcosa a quella locazione, ed è ovvio che non viene trovata una pagina.

Mi viene da dire che la mancanza del cosiddetto hashbang (#!) causi problemi, perché il server non è in grado di sopperire alla richiesta, a meno che non sia debitamente configurato.

Trovi un approfondimento sul tema in questa pagina.

Ciao!

[fermat]

si hai ragione, è l'hashtag che crea problemi.
o meglio, la sua assenza.

così non ho problemi:

const router = createRouter({
    history: createWebHashHistory(),
    routes
});

cmq in angular anche senza # non ho il problema.
ho appena provato su un'applicazione online.
bho...

cmq grazie!