vue中路由跳轉傳參數有多種,自己常用的是下面的幾種

通過router-link進行跳轉 通過編程導航進行路由跳轉

 1. router-link

<router-link  :to="{  path: 'yourPath',   params: {    name: 'name',    dataObj: data  },  query: {   name: 'name',    dataObj: data  } }"></router-link> 1. path -> 是要跳轉的路由路徑,也可以是路由文件里面配置的 name 值,兩者都可以進行路由導航 2. params -> 是要傳送的參數,參數可以直接key:value形式傳遞 3. query -> 是通過 url 來傳遞參數的同樣是key:value形式傳遞 // 2,3兩點皆可傳遞

2. $router方式跳轉

// 組件 a<template> <button @click="sendParams">傳遞</button></template><script> export default { name: '', data () {  return {  msg: 'test message'  } }, methods: {  sendParams () {  this.$router.push({   path: 'yourPath',    name: '要跳轉的路徑的 name,在 router 文件夾下的 index.js 文件內找',   params: {     name: 'name',     dataObj: this.msg   }   /*query: {    name: 'name',     dataObj: this.msg   }*/  })  } }, computed: { }, mounted () { } }</script><style scoped></style>----------------------------------------// 組件b<template> <h3>msg</h3></template><script> export default { name: '', data () {  return {  msg: ''  } }, methods: {  getParams () {  // 取到路由帶過來的參數   let routerParams = this.$route.params.dataobj  // 將數據放在當前組件的數據內  this.msg = routerParams  } }, watch: { // 監測路由變化,只要變化了就調用獲取路由參數方法將數據存儲本組件即可  '$route': 'getParams' } }</script><style scoped></style>

這次項目就遇到了這些問題, 希望能幫助到大家!

以上所述是小編給大家介紹的vue路由跳轉傳參數的方法詳解整合，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對錯新站長站網站的支持！