首頁 > web前端 > Vue.js > 主體

vue.js如何帶參數跳轉

coldplay.xixi
發布: 2020-11-30 16:59:08
原創
3023 人瀏覽過

vue.js帶參數跳轉的方法:先建立【readDetail.vue】且在【index.js】中註冊路由;然後透過【router-link】進行跳轉,或透過【$router 】方式跳轉。

vue.js如何帶參數跳轉

本教學操作環境:windows10系統、vue2.5.2,本文適用於所有品牌的電腦。

【相關文章推薦:vue.js

#vue.js帶參數跳轉的方法:

先建立readDetail.vue 且在index.js中註冊路由。

傳遞頁面方式:

1.透過router-link進行跳轉

  
     
登入後複製
  • path -> 是要跳轉的路由路徑,也可以是路由文件裡面配置的name 值,兩者都可以進行路由導航

  • params -> 是要傳送的參數,參數可以直接key:value形式傳遞

  • query -> 是透過url 來傳遞參數的同樣是key:value形式傳遞

2. $router方式跳轉

this.$router.push({name:'路由命名',params:{参数名:参数值,参数名:参数值}})
 this.$router.push({  
            path: 'yourPath',   
            name: '要跳转的路径的 name,在 router 文件夹下的 index.js 文件内找',  
            params: {   
                key: 'key',   
                msgKey: this.msg  
            }  
            /*query: {  
                key: 'key',   
                msgKey: this.msg  
            }*/  
        })
登入後複製

接受方式

this.$route.params.参数名
this.$route.query.参数名
登入後複製

實驗(包含兩種方式):

傳遞頁面:

 
                
              -----------------------------------------------------------------------------------------export default {
    name: 'reads',
    data () {
      return {
        msg: 'msg test.'
      }
    },
登入後複製

接收頁:

Num:{{ myIndex }}

{{ msg }}

-----------------------------------------------------------data () { return { msg: '', // 保存传递过来的index myIndex: '' }-----------------------------------------------------------mounted: function () { this.msg = this.$route.params.msgKeyOne this.myIndex = this.$route.params.msgKey console.log(this.myIndex) }
登入後複製

####################################################相關免費學習推薦:###javascript###(影片)#######

以上是vue.js如何帶參數跳轉的詳細內容。更多資訊請關注PHP中文網其他相關文章!

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
作者最新文章
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板
關於我們 免責聲明 Sitemap
PHP中文網:公益線上PHP培訓,幫助PHP學習者快速成長!