Bagaimana untuk melaksanakan lompat halaman dalam vuejs

Cara melaksanakan lompat halaman dalam vuejs: 1. Gunakan "..." 2. Gunakan "; pernyataan .$router.push({path: 'page url address' })" ini.

Persekitaran pengendalian tutorial ini: sistem Windows 7, vue versi 2.9.6, komputer DELL G3.

Dua cara untuk melaksanakan lompatan halaman dengan penghalaan Vue (pautan penghala dan JS)

1 Melalui 🎜> Laksanakan

komponen digunakan untuk menetapkan pautan navigasi dan menukar kandungan HTML yang berbeza

Penggunaan:

• Kaedah penulisan mudah

<router-link to="demo2">demo2</router-link>

• Menggunakan kaedah penulisan v-bind

<router-link :to="&#39;demo2&#39;">demo2</router-link>

<!-- 也可以用{}包裹对应的path或name -->
<router-link :to="{ name: &#39;demo2&#39; }">demo2</router-link>

• Cara menulis parameter

<router-link :to="{ name: &#39;demo2&#39;, params: { userId: 123 }}">demo2</router-link>

Di sini parameter perlu dilalui dalam Konfigurasikan laluan demo2 dalam

router.js, dan tambah aksara kad bebas selepas demo2 dalam laluan: dan userId yang sepadan, seperti berikut:

{
  path: '/demo2/:userId',
  name: 'demo2',
  component: demo2
  },

Selepas konfigurasi selesai, hasil lompat halaman akan menjadi

/demo2/123

"123" di sini ialah

userIdJadi, bagaimana untuk mendapatkan parameter yang diluluskan

userId

dalam halaman baharu? Gunakan

ini.$route.params.xx

dalam cangkuk dilekapkan Dapatkan parameter yang diluluskan, seperti berikut:

mounted () {
    alert(this.$route.params.userId)
}
// 弹出123

Pasangan nilai kunci alamat input

<router-link :to="{ path: &#39;demo2&#39;, query: { plan: &#39;private&#39; }}">demo2</router-link>

Hasil lompatan halaman ialah

/demo2? =private

(Perhatikan bahawa tidak perlu mengkonfigurasi laluan dalam

router.js

) Dapatkan pelan pasangan nilai kunci alamat yang diluluskan dalam halaman baharu , anda boleh menggunakan

ini.$route.plan.xx

dalam cangkuk dilekapkan Dapatkan pasangan nilai kunci alamat yang diluluskan, seperti berikut:

mounted () {
  alert(this.$route.query.plan)
}

// 弹出private

2. Dilaksanakan melalui JS ---this.$router.push()

bahagian templat:

<button @click="toURL">跳转页面</button>

bahagian skrip:

(Perhatikan di sini adalah penghala, di atas ialah laluan)

Tulisan ringkas

methods:{
  toURL(){
      this.$router.push({ path: '/demo2' })
  }
}

Cara menulis parameter

methods:{
  toURL(){
      this.$router.push({ name: 'demo2', params: { userId: 123 }})
  }
}

Pasangan nilai kunci alamat masuk

Pengesyoran berkaitan: "

methods:{
  toURL(){ 
     this.$router.push({ name: 'demo2', params: { userId: 123 }, query: { plan: 'private' } })
  }
}

tutorial vue.js

"

Atas ialah kandungan terperinci Bagaimana untuk melaksanakan lompat halaman dalam vuejs. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!