Przekierowanie Vue.js na inną stronę

133

Chciałbym dokonać przekierowania w Vue.jspodobny sposób do waniliowego javascript

window.location.href = 'some_url'

Jak mogłem to osiągnąć w Vue.js?

Jimmy Obonyo Abor
źródło
Czy masz na myśli przekierowanie do trasy zdefiniowanej w routerze vue '/ my / vuerouter / url'? Czy może przekierowujesz przeglądarkę do some-url.com ?
hitautodestruct

Odpowiedzi:

187

Jeśli korzystasz vue-router, użyj go, router.go(path)aby nawigować do określonej trasy. Dostęp do routera można uzyskać z poziomu komponentu za pomocą this.$router.

W przeciwnym razie window.location.href = 'some url';działa dobrze w przypadku aplikacji innych niż jednostronicowe.

EDYCJA : router.go()zmieniona w VueJS 2.0. Możesz użyć router.push({ name: "yourroutename"})lub po prostu router.push("yourroutename")teraz, aby przekierować.

https://router.vuejs.org/guide/essentials/named-routes.html

Jeff
źródło
2
W moim przypadku użycie jest skierowanie do innego non pojedynczej stronie
Jimmy Obonyo Abor
8
Dostawałem: Uncaught ReferenceError: router is not definedbłąd, jak wstrzyknąć router w komponencie?
Saurabh
@felipekm what? Czy to nie to samo?
Barry D.
3
router.push ("nazwa twojej trasy") NIE jest tym samym, co router.push ({nazwa: "nazwa twojej trasy"). Pierwsza określa bezpośrednio trasę. Drugi wybiera trasę o określonej nazwie.
pinki
8
this.$router.push('routename)
ka_lin
84

Według dokumentacji router.push wydaje się być preferowaną metodą:

Aby przejść do innego adresu URL, użyj router.push. Ta metoda wypycha nowy wpis do stosu historii, więc gdy użytkownik kliknie przycisk Wstecz w przeglądarce, zostanie przeniesiony do poprzedniego adresu URL.

źródło: https://router.vuejs.org/en/essentials/navigation.html

FYI: Konfiguracja Webpack i komponentów, aplikacja na jednej stronie (gdzie importujesz router przez Main.js), musiałem wywołać funkcje routera, mówiąc:

this.$router

Przykład: jeśli chcesz przekierować na trasę o nazwie „Dom” po spełnieniu warunku:

this.$router.push('Home') 
Dave Sottimano
źródło
1
To pytanie nie ma nic wspólnego z kompilacją (pakietem internetowym).
Jimmy Obonyo Abor
12
Dzięki za negatywną opinię, mimo że większość ludzi będzie rozwijać się z vue cli, webpack, routerem i store / vuex i prawdopodobnie napotka problem braku możliwości połączenia się z routerem.
Dave Sottimano
1
@JimmyObonyoAbor hiyo comment na downvote utasema unamlipa haha
Cholowao
@Cholowao he he he, sawa tushasikia! dostałem reakcję kazi, pinguj mnie, jeśli masz umiejętności ...
Jimmy Obonyo Abor
1
@JimmyObonyoAbor
Cholowao
41

po prostu użyj:

window.location.href = "http://siwei.me"

Nie używaj routera vue, w przeciwnym razie zostaniesz przekierowany do „ http://yoursite.com/#!/http://siwei.me

moje środowisko: węzeł 6.2.1, vue 1.0.21, Ubuntu.

Siwei Shen 申思维
źródło
1
Nie widzę żadnego powodu, dlaczego miałoby to być w cudzysłowach ..?
Moritz
1
W rzeczywistości standardjs mówi „Używaj pojedynczych cudzysłowów dla łańcuchów, z wyjątkiem unikania znaków ucieczki”.
Moritz
to było jakiś czas temu, ale właściwie rozwiązałem ten problem używając pojedynczych cudzysłowów, ale myślę, że podwójne cudzysłowy powinny również działać i mogą być przydatne w złożonych linkach.
Jimmy Obonyo Abor
najpierw sprawdź wersję vue. we wczesnej wersji być może vue nie dba o konwencję kodu. Jednak w moim środowisku konwencja kodu spowoduje błąd kompilacji (z es6 skompilowanego do vanilla js). Jeśli nie korzystałeś z modułu węzła 'ES6', być może będzie dobrze.
Siwei Shen 申思维
co by było, gdybyś chciał otworzyć go w nowej karcie?
Fthi.a. Abadi
29

Wewnątrz tagu skryptu komponentu możesz użyć routera i zrobić coś takiego

this.$router.push('/url-path')
Njeru Cyrus
źródło
Dzięki stary, proste i proste.
Solution Spirit
8

Po prostu martwy prosty routing:

this.$router.push('Home');
Mohammad Mahdi KouchakYazdi
źródło
7

też mogę spróbować ...

router.push({ name: 'myRoute' })
Davod Aslanifakor
źródło
6

jeśli chcesz przekierować na inną stronę this.$router.push({path: '/pagename'})

jeśli chcesz trasować z parametrami this.$router.push({path: '/pagename', param: {param1: 'value1', param2: value2})

Bagzie
źródło
5
window.location = url;

„url” to adres internetowy, który chcesz przekierować.

Rayees Pk
źródło
3

Możesz także użyć v-bind bezpośrednio do szablonu, na przykład ...

<a :href="'/path-to-route/' + IdVariable">

:jest skrót v-bind.

mEnE
źródło
Możesz także użyć składni ES6:: href = " `/path-to-route/${IdVariable}`" Lub nazwanej trasy, o której mowa tutaj ( router.vuejs.org/guide/essentials/named-routes.html ): :href="{ name: 'NamedRouteDeclaredAtRouter' , params: { id: idValue } }"
mEnE
1

Jeśli ktoś chce stałego przekierowania z jednej strony /ana inną/b


Możemy skorzystać z redirect:opcji dodanej w router.js. Na przykład, jeśli chcemy przekierowywać użytkowników zawsze na oddzielną stronę, kiedy wpisuje główny lub podstawowy adres URL /:

const router = new Router({
  mode: "history",
  base: process.env.BASE_URL,
  routes: [
    {
      path: "/",
      redirect: "/someOtherPage",
      name: "home",
      component: Home,
      // () =>
      // import(/* webpackChunkName: "home" */ "./views/pageView/home.vue"),

    },
   ]
Rakibul Haq
źródło
0
<div id="app">
   <a :href="path" />Link</a>
</div>

<script>
      new Vue({
        el: '#app',
        data: {
          path: 'https://www.google.com/'
        }
      });
</script> enter code here
Yash
źródło
0

Więc szukałem tylko tego, gdzie umieścićwindow.location.href i doszedłem do wniosku, że najlepszym i najszybszym sposobem przekierowania są trasy (w ten sposób nie czekamy, aż coś się załaduje, zanim przekierujemy).

Lubię to:

routes: [
    {
        path: "/",
        name: "ExampleRoot",
        component: exampleComponent,
        meta: {
            title: "_exampleTitle"
        },
        beforeEnter: () => {
            window.location.href = 'https://www.myurl.io';
        }
    }]

Może to komuś pomoże ...

Marcus
źródło
0

Aby zachować zgodność z pierwotnym żądaniem:

window.location.href = 'some_url'

Możesz zrobić coś takiego:

<div @click="this.window.location='some_url'">
</div>

Zauważ, że nie korzysta to z używania routera Vue, ale jeśli chcesz „wykonać przekierowanie w Vue.js podobne do zwykłego javascript”, to zadziała.

Prawie Pitt
źródło