Oto przykład w dokumentach:
// with query, resulting in /register?plan=private
router.push({ path: 'register', query: { plan: 'private' }})
Ref: https://router.vuejs.org/en/essentials/navigation.html
Jak wspomniano w tych dokumentach, router.replace
działa jakrouter.push
Wygląda więc na to, że masz to dobrze w swoim przykładowym kodzie. Myślę jednak, że może być konieczne uwzględnienie jednego z parametrów name
lub path
, aby router miał jakąś trasę, do której należy nawigować. Bez name
lub path
nie wygląda to zbytnio.
Oto moje obecne rozumienie teraz:
query
jest opcjonalne dla routera - dodatkowe informacje dla komponentu, aby utworzyć widok
name
lub path
jest obowiązkowe - decyduje, który komponent ma się pojawić w Twoim <router-view>
.
To może być brakująca rzecz w twoim przykładowym kodzie.
EDYCJA: Dodatkowe szczegóły po komentarzach
Czy próbowałeś używać nazwanych tras w tym przypadku? Masz trasy dynamiczne i łatwiej jest osobno podać parametry i zapytania:
routes: [
{ name: 'user-view', path: '/user/:id', component: UserView },
// other routes
]
a następnie w swoich metodach:
this.$router.replace({ name: "user-view", params: {id:"123"}, query: {q1: "q1"} })
Technicznie nie ma różnicy między powyższymi a this.$router.replace({path: "/user/123", query:{q1: "q1"}})
, ale łatwiej jest podać parametry dynamiczne dla nazwanych tras niż tworzenie ciągu trasy. Ale w obu przypadkach należy wziąć pod uwagę parametry zapytania. W obu przypadkach nie mogłem znaleźć nic złego w sposobie obsługi parametrów zapytania.
Po znalezieniu się w trasie możesz pobrać parametry dynamiczne jako, this.$route.params.id
a parametry zapytania jako this.$route.query.q1
.
Bez ponownego ładowania strony lub odświeżania domeny
history.pushState
może wykonać zadanie.Dodaj tę metodę w swoim komponencie lub w innym miejscu, aby to zrobić:
Tak więc w dowolnym miejscu komponentu wywołaj,
addParamsToLocation({foo: 'bar'})
aby przesłać bieżącą lokalizację z parametrami zapytania ze stosu window.history.Aby dodać parametry zapytania do bieżącej lokalizacji bez wypychania nowego wpisu historii , użyj
history.replaceState
zamiast tego.Testowane z Vue 2.6.10 i Nuxt 2.8.1.
Uważaj na tę metodę!
Vue Router nie wie, że url się zmienił, więc nie odzwierciedla adresu URL po pushState.
źródło
Właściwie możesz po prostu wypchnąć zapytanie w ten sposób:
this.$router.push({query: {plan: 'private'}})
Na podstawie: https://github.com/vuejs/vue-router/issues/1631
źródło
źródło
Error: Avoided redundant navigation to current location
this.$router.push({ query: Object.assign({...this.$route.query}, { new: 'param' }) })
this.$router.push({ query: {...this.$route.query,new: 'param'},) })
Jeśli próbujesz zachować niektóre parametry, zmieniając inne, pamiętaj, aby skopiować stan zapytania routera vue i nie używać go ponownie.
To działa, ponieważ tworzysz kopię bez odwołań:
podczas gdy poniżej spowoduje, że Vue Router pomyśli, że ponownie używasz tego samego zapytania, i doprowadzi do
NavigationDuplicated
błędu:Oczywiście możesz zdekomponować obiekt zapytania, na przykład poniżej, ale musisz znać wszystkie parametry zapytania na swojej stronie, w przeciwnym razie ryzykujesz utratę ich w wynikowej nawigacji.
Uwaga, chociaż powyższy przykład dotyczy
push()
, to działareplace()
również z .Testowane z vue-router 3.1.6.
źródło
W przypadku dodawania wielu parametrów zapytania, właśnie to zadziałało (stąd https://forum.vuejs.org/t/vue-router-programmatically-append-to-querystring/3655/5 ).
źródło
Aby ustawić / usunąć wiele parametrów zapytania naraz, skończyłem z poniższymi metodami jako częścią moich globalnych mixinów (
this
wskazuje na komponent vue):źródło
Zwykle używam do tego obiektu historii. Nie ładuje również ponownie strony.
Przykład:
źródło
Oto moje proste rozwiązanie, aby zaktualizować parametry zapytania w adresie URL bez odświeżania strony. Upewnij się, że działa w Twoim przypadku użycia.
źródło