Pengalihan Vue.js ke halaman lain

133

Saya ingin melakukan pengalihan Vue.jsserupa dengan javascript vanilla

window.location.href = 'some_url'

Bagaimana saya bisa mencapai ini di Vue.js?

Jimmy Obonyo Abor
sumber
Apakah maksud Anda adalah pengalihan ke rute yang ditentukan dalam router vue '/ my / vuerouter / url'? Atau apakah Anda peramban mengalihkan ke some-url.com ?
hitautodestruct

Jawaban:

187

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

Jeff
sumber
2
Dalam kasus saya, penggunaannya adalah untuk mengarahkan ke halaman non-tunggal
Jimmy Obonyo Abor
8
Saya mendapatkan: Uncaught ReferenceError: router is not definederror, Bagaimana cara menginjeksi router di komponen?
Saurabh
@felipekm apa? Bukankah itu hal yang sama?
Barry D.
3
router.push ("yourroutename") TIDAK sama dengan router.push ({name: "yourroutename"). Yang pertama mendefinisikan rute secara langsung. Yang kedua mengambil rute dengan nama yang ditentukan.
pinki
8
this.$router.push('routename)
ka_lin
84

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') 
Dave Sottimano
sumber
1
Pertanyaan ini tidak ada hubungannya dengan kompilasi (webpack).
Jimmy Obonyo Abor
12
Terima kasih untuk downvote, meskipun kebanyakan orang akan berkembang dengan vue cli, webpack, router dan store / vuex dan kemungkinan akan mengalami masalah karena tidak dapat memanggil router.
Dave Sottimano
1
@JimmyObonyoAbor hiyo comment na downvote utasema unamlipa haha
Cholowao
@Cholowao he he he, sawa tushasikia! saya mendapat reaksi kazi, ping saya jika Anda mendapat keterampilan ...
Jimmy Obonyo Abor
1
@JimmyObonyoAbor
Cholowao
41

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.

Siwei Shen 申思维
sumber
1
Saya tidak melihat alasan, mengapa ini harus dengan tanda kutip ganda ..?
Moritz
1
Sebenarnya standardjs mengatakan "Gunakan tanda kutip tunggal untuk string kecuali untuk menghindari melarikan diri."
Moritz
ini beberapa waktu yang lalu tetapi saya sebenarnya saya memecahkan ini dengan menggunakan tanda kutip tunggal, tetapi saya kira tanda kutip ganda juga harus bekerja dan mungkin berguna dalam tautan kompleks.
Jimmy Obonyo Abor
periksa versi vue terlebih dahulu. pada versi awal, mungkin vue tidak peduli dengan konvensi kode. Namun di lingkungan saya, konvensi kode akan menyebabkan kesalahan kompilasi (dari es6 dikompilasi ke vanilla js). Jika Anda belum menggunakan modul simpul 'ES6', mungkin itu akan baik-baik saja.
Siwei Shen 申思维
bagaimana jika Anda ingin membukanya di tab baru?
Fthi.a.Abadi
29

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

this.$router.push('/url-path')
Njeru Cyrus
sumber
Terima kasih kawan, Sederhana dan lurus ke depan.
Solution Spirit
8

Hanya perutean sederhana yang mati:

this.$router.push('Home');
Mohammad Mahdi KouchakYazdi
sumber
7

dapat mencoba ini juga ...

router.push({ name: 'myRoute' })
Davod Aslanifakor
sumber
6

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

Bagzie
sumber
5
window.location = url;

'url' adalah url web yang ingin Anda redirect.

Rayees Pk
sumber
3

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

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

yang :merupakan singkatan dari v-bind.

mEnE
sumber
Anda juga dapat menggunakan Sintaks ES6:: href = " `/path-to-route/${IdVariable}`" Atau rute yang disebutkan di sini ( router.vuejs.org/guide/essentials/named-routes.html ): :href="{ name: 'NamedRouteDeclaredAtRouter' , params: { id: idValue } }"
mEnE
1

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

    },
   ]
Rakibul Haq
sumber
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
sumber
0

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

Marcus
sumber
0

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.

AlmostPitt
sumber