web-dev-qa-db-fra.com

Fonctionnement de l'option de base dans vue-router

Comme par documentation de l'option de base:

L'URL de base de l'application. Par exemple, si l'intégralité de l'application d'une seule page est diffusée sous/app /, la base doit utiliser la valeur "/ app /".

Mais je l'ai essayé comme suit, ça ne semble pas fonctionner:

const router = new VueRouter({
  base: "/app/",
  routes
})

Démo violon .

vue.jsvuejs2vue-router
10
Saurabh

La base a une valeur par défaut de '/'. Tirant l'analogie de la façon dont il est utilisé pour router:

<router-link to="home">Home</router-link>

ou

<router-link :to="{ path: '/abc'}" replace></router-link>

J'ai juste omis le /app et cela fonctionne . La base n'a pas besoin de faire partie du router-link

[~ # ~] modifier [~ # ~]

Utilisation de base dans vue-router

(Pour ce test, j'avais utilisé vue-cli avec le modèle webpack.)

J'avais mes configurations de routeur comme ceci:

export default new Router({
  base: '/app',
  mode: 'history',
  routes: [
    {
      path: '/',
      name: 'RangeInputDemo',
      component: ComponentDemo
    }
  ]
})

Ajout de la base en tant que '/app' n'a fait aucune différence dans le routage qui s'est produit tout au long du projet, comme si la base était toujours définie sur '/'.

J'ai essayé de changer l'URL du côté serveur (l'URL à laquelle le projet est servi).

Donc, dans dev-server.js où :

var uri = 'http://localhost:' + port

contrôle l'url de l'application, j'ai apporté une légère modification à:

var uri = 'http://localhost:' + port + '/app'

Cela a fait apparaître l'application:

enter image description hereenter image description here

Notez que fullPath étant '/' dans la console vue (deuxième image).

Juste pour une double vérification, j'ai changé le base en '/' encore.

enter image description here

Ainsi, la propriété base de la configuration router consiste à définir l'URL de base telle que définie par le serveur, si le serveur sert l'application sur une route autre que '/' alors le base peut être utilisé pour que l'application soit exécutée à partir de l'url définie.

Étant donné que la question nécessite le déplacement des itinéraires sous /app, Je pense avoir /app car la route parente serait la solution dans ce cas, si le serveur n'est pas censé changer la route sur laquelle il dessert.

8
Amresh Venugopal

A eu le même problème, la définition de "base" n'a pas fonctionné - la solution consiste à mettre à jour l'URL de base dans le routeur:

{ name: 'listings', path: baseUrl + '/listings',   component: PageListings}

et faites référence aux itinéraires par leur nom:

<router-link :to="{ name: 'listings' }" exact>Listings</router-link>
0
ego