web-dev-qa-db-fra.com

Mettre à jour silencieusement l'URL sans déclencher la route dans vue-router

J'ai besoin de mettre à jour le hachage de l'url, sans réellement déclencher la vue-router pour aller sur cette route. Quelque chose comme:

router.replace('my/new/path', {silent:true})

Cela mettrait à jour l'URL en .../#/my/new/path, mais le routeur lui-même ne serait pas acheminé vers ce chemin.

Existe-t-il un moyen élégant d'y parvenir?

vue.jsvue-router
7
Rinux

Le routeur Vue est allumé ou éteint, vous ne pouvez donc pas "faire en sorte qu'il ne détecte pas certaines URL". Cela dit, Vue ne réutilise les composants que s'il n'a pas besoin de les détruire et vous permet d'aliaser les URL. Cela vous permet d'avoir les URL de votre application iframe comme alias dans votre itinéraire, et de garder le même composant en vie pendant ce temps, empêchant votre iframe d'être rechargée.

// router.js
import Comp1 from "./components/Comp1";
import Comp2 from "./components/Comp2";

export default [
  {
    path: "/route1",
    component: Comp1,
    alias: ["/route2", "/route3", "/route4"]
  },
  {
    path: "/otherroute",
    component: Comp2
  }
];

// main.js
import Vue from "vue";
import App from "./App";
import VueRouter from "vue-router";
import routes from "./router";

Vue.config.productionTip = false;
Vue.use(VueRouter);

const router = new VueRouter({
  routes
});

/* eslint-disable no-new */
new Vue({
  el: "#app",
  router,
  components: { App },
  template: "<App/>"
});

Dans cet exemple, route1, route2, route3 et route4 sera traité comme si route1 doit être chargé, ce qui provoque votre composant Comp1 rester en vie.

Edit Vue Template

1
Sumurai8

Sans recharger la page ou rafraîchir le dom, history.pushState Peut faire le travail.
Ajoutez cette méthode dans votre composant ou ailleurs pour ce faire:

addHashToLocation(params) {
  history.pushState(
    {},
    null,
    this.$route.path + '#' + encodeURIComponent(params)
  )
}

Donc, n'importe où dans votre composant, appelez addHashToLocation('/my/new/path') pour pousser l'emplacement actuel avec les paramètres de requête dans la pile window.history.

Pour ajouter des paramètres de requête à l'emplacement actuel sans pousser un nouvel historique entrée, utilisez plutôt history.replaceState.

Devrait fonctionner avec Vue 2.6.10 et Nuxt 2.8.1.

Soyez prudent avec cette méthode!
Vue Router ne sait pas que l'url a changé, donc il ne reflète pas l'url après pushState.

3
ManUtopiK