Pengalihan Vue.js ke halaman lain

Saya ingin melakukan pengalihan Vue.jsserupa dengan javascript vanilla

window.location.href = 'some_url'

Bagaimana saya bisa mencapai ini di Vue.js?

Jika Anda menggunakan vue-router, Anda harus menggunakan router.go(path)untuk menavigasi ke rute tertentu. Router dapat diakses dari dalam komponen menggunakan this.$router.

Jika tidak, window.location.href = 'some url';berfungsi dengan baik untuk aplikasi non-halaman.

EDIT : router.go()diubah dalam VueJS 2.0. Anda dapat menggunakan router.push({ name: "yourroutename"})atau router.push("yourroutename")sekarang untuk mengarahkan ulang.

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

Menurut dokumen, router.push sepertinya metode yang disukai:

Untuk menavigasi ke URL yang berbeda, gunakan router.push. Metode ini mendorong entri baru ke dalam tumpukan riwayat, jadi ketika pengguna mengklik tombol kembali browser mereka akan dibawa ke URL sebelumnya.

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

FYI: Webpack & pengaturan komponen, aplikasi satu halaman (tempat Anda mengimpor router melalui Main.js), saya harus memanggil fungsi router dengan mengatakan:

this.$router

Contoh: jika Anda ingin mengarahkan ulang ke rute yang disebut "Rumah" setelah suatu kondisi terpenuhi:

this.$router.push('Home') 

cukup gunakan:

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

Jangan gunakan vue-router, jika tidak Anda akan diarahkan ke " http://yoursite.com/#!/http://siwei.me "

lingkungan saya: simpul 6.2.1, vue 1.0.21, Ubuntu.

Ketika di dalam tag skrip komponen Anda dapat menggunakan router dan melakukan sesuatu seperti ini

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

Hanya perutean sederhana yang mati:

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

dapat mencoba ini juga ...

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

jika Anda ingin merutekan ke halaman lain this.$router.push({path: '/pagename'})

jika Anda ingin rute dengan params this.$router.push({path: '/pagename', param: {param1: 'value1', param2: value2})

window.location = url;

'url' adalah url web yang ingin Anda redirect.

Anda juga dapat menggunakan v-bind langsung ke template seperti ...

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

yang :merupakan singkatan dari v-bind.

Jika ada yang ingin pengalihan permanen dari satu halaman /ake halaman lain/b

Kita dapat menggunakan redirect:opsi yang ditambahkan di router.js. Misalnya jika kita ingin mengarahkan pengguna selalu ke halaman terpisah ketika dia mengetik url root atau base /:

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

Jadi, yang saya cari hanyalah tempat untuk meletakkan window.location.hrefdan kesimpulan yang saya dapatkan adalah bahwa cara terbaik dan tercepat untuk mengarahkan ulang adalah melalui rute (dengan cara itu, kami tidak menunggu apa pun untuk dimuat sebelum kami mengarahkan ulang).

Seperti ini:

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

Mungkin itu akan membantu seseorang ..

Untuk tetap sejalan dengan permintaan awal Anda:

window.location.href = 'some_url'

Anda dapat melakukan sesuatu seperti ini:

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

Perhatikan bahwa ini tidak memanfaatkan penggunaan router Vue, tetapi jika Anda ingin "membuat pengalihan di Vue.js mirip dengan vanilla javascript", ini akan berhasil.