Rumah > hujung hadapan web > Soal Jawab bahagian hadapan > Bagaimana untuk lulus parameter apabila melompat dalam vuejs

Bagaimana untuk lulus parameter apabila melompat dalam vuejs

青灯夜游
Lepaskan: 2023-01-11 09:22:12
asal
2868 orang telah melayarinya

Kaedah pemindahan parameter lompat Vue: 1. Pemindahan parameter lompat melalui params atau atribut pertanyaan teg pautan penghala; 2. Melalui "this.$router.push({name:'Route name' ,params :{parameter name:parameter value..}})" pernyataan untuk melompat ke memindahkan parameter.

Bagaimana untuk lulus parameter apabila melompat dalam vuejs

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

Mula-mula buat readDetail.vue dan daftarkan laluan dalam index.js.

Kaedah penghantaran halaman:

1 Lompat melalui pautan penghala

<router-link>  
    <button>跳转</button> 
</router-link> 

 1. path -> 是要跳转的路由路径,也可以是路由文件里面配置的 name 值,两者都可以进行路由导航  
 2. params -> 是要传送的参数,参数可以直接key:value形式传递  
 3. query -> 是通过 url 来传递参数的同样是key:value形式传递
Salin selepas log masuk

2 Lompat melalui $router

ini.$ router.push({name:'Route name',params:{parameter name:parameter value,parameter name:parameter value}})

 this.$router.push({  
            path: 'yourPath',   
            name: '要跳转的路径的 name,在 router 文件夹下的 index.js 文件内找',  
            params: {   
                key: 'key',   
                msgKey: this.msg  
            }  
            /*query: {  
                key: 'key',   
                msgKey: this.msg  
            }*/  
        })
Salin selepas log masuk

Acceptance method

  • this.$route.params.Parameter name

  • this.$route.query.Parameter name

Eksperimen (termasuk Dua cara) :

Halaman penghantaran:

 <router-link>
                <button>跳转</button>
              </router-link>
<button>传递</button>
-----------------------------------------------------------------------------------------
export default {
    name: 'reads',
    data () {
      return {
        msg: 'msg test.'
      }
    },
Salin selepas log masuk

Halaman penerimaan:

<p>
    </p><p>Num:{{ myIndex }}</p>
    <p>{{ msg }}</p>
  
-----------------------------------------------------------
data () {
      return {
        msg: '',
        // 保存传递过来的index
        myIndex: ''
      }
-----------------------------------------------------------
mounted: function () {
      this.msg = this.$route.params.msgKeyOne
      this.myIndex = this.$route.params.msgKey
      console.log(this.myIndex)
    }
Salin selepas log masuk

Hasil percubaan:

Bagaimana untuk lulus parameter apabila melompat dalam vuejs

Berkaitan cadangan: "tutorial vue.js"

Atas ialah kandungan terperinci Bagaimana untuk lulus parameter apabila melompat dalam vuejs. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Label berkaitan:
sumber:php.cn
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan