Przekierowanie Vue.js na inną stronę

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?

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

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') 

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.

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

this.$router.push('/url-path')

Po prostu martwy prosty routing:

this.$router.push('Home');

też mogę spróbować ...

router.push({ name: 'myRoute' })

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})

window.location = url;

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

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.

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"),

    },
   ]

<div id="app">
   <a :href="path" />Link</a>
</div>

<script>
      new Vue({
        el: '#app',
        data: {
          path: 'https://www.google.com/'
        }
      });
</script> enter code here

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 ...

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.