Vue.js'nin başka bir sayfaya yönlendirilmesi

Vue.jsVanilya javascript'e benzer bir yeniden yönlendirme yapmak istiyorum

window.location.href = 'some_url'

Bunu Vue.js'de nasıl başarabilirim?

Kullanıyorsanız vue-router, router.go(path)belirli bir rotaya gitmek için kullanmalısınız . Yönlendiriciye kullanılarak bir bileşenin içinden erişilebilir this.$router.

Aksi takdirde, window.location.href = 'some url';tek sayfalı olmayan uygulamalar için iyi çalışır.

EDIT : router.go()VueJS 2.0'da değiştirildi. Yeniden yönlendirmek için router.push({ name: "yourroutename"})veya hemen router.push("yourroutename")şimdi kullanabilirsiniz.

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

Dokümanlara göre router.push tercih edilen yöntem gibi görünüyor:

Farklı bir URL'ye gitmek için router.push kullanın. Bu yöntem, geçmiş yığınına yeni bir giriş iter, böylece kullanıcı tarayıcı geri düğmesini tıkladığında önceki URL'ye götürülür.

kaynak: https://router.vuejs.org/en/essentials/navigation.html

Bilginize: Web paketi ve bileşen kurulumu, tek sayfalı uygulama (yönlendiriciyi Main.js aracılığıyla içe aktardığınız yer), şunu söyleyerek yönlendirici işlevlerini çağırmak zorunda kaldım:

this.$router

Örnek: Bir koşul karşılandıktan sonra "Ana Sayfa" adlı bir rotaya yeniden yönlendirmek istiyorsanız:

this.$router.push('Home') 

sadece kullan:

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

Vue-router kullanmayın, aksi takdirde " http://yoursite.com/#!/http://siwei.me " adresine yönlendirileceksiniz.

ortamım: düğüm 6.2.1, vue 1.0.21, Ubuntu.

Bir bileşen komut dosyası etiketinin içindeyken yönlendiriciyi kullanabilir ve bunun gibi bir şey yapabilirsiniz.

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

Sadece basit bir yönlendirme:

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

bunu da deneyebilirsin ...

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

başka bir sayfaya yönlendirmek istiyorsanız this.$router.push({path: '/pagename'})

params ile yol almak istiyorsan this.$router.push({path: '/pagename', param: {param1: 'value1', param2: value2})

window.location = url;

'url', yeniden yönlendirmek istediğiniz web url'sidir.

Ayrıca v-bind'i doğrudan şablona da kullanabilirsiniz ...

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

:kısaltmasıdır v-bind.

Herhangi biri bir sayfadan /adiğerine kalıcı yönlendirme istiyorsa/b

redirect:Eklenen seçeneği kullanabiliriz router.js. Örneğin, kullanıcıları kök veya temel URL'yi yazdığında her zaman ayrı bir sayfaya yönlendirmek istiyorsak /:

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

Yani, aradığım şey sadece nereye koymam gerektiğiydi window.location.hrefve vardığım sonuç, yeniden yönlendirmenin en iyi ve en hızlı yolunun rotalarda olduğuydu (bu şekilde, yeniden yönlendirmeden önce hiçbir şeyin yüklenmesini beklemiyoruz).

Bunun gibi:

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

Belki birine yardımcı olur ..

Orijinal isteğiniz doğrultusunda kalmak için:

window.location.href = 'some_url'

Bunun gibi bir şey yapabilirsiniz:

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

Bunun, Vue'nun yönlendiricisini kullanmaktan yararlanmadığını, ancak "Vue.js'de vanilya javascript'e benzer bir yeniden yönlendirme yapmak" istiyorsanız, bunun işe yarayacağını unutmayın.