vueルーティングなしでアドレスバーurlのパラメータを直接取得

1235 ワード

前言
vueではルーティングを使用してurlパラメータを設定することはよく知られていますが、この方法ではパスにパラメータを添付する必要があり、このパラメータはvueのルーティングで事前に設定する必要があります.相対的に、urlの後ろに直接接続する場合がありますか?mid=100の方式はパラメータを伝達するのがもっと柔軟で、ルートを設定する必要はなく、urlの後でパラメータをつなぐだけでいいが、この方式はjavascriptを通じてurlの中のパラメータを取得して抽出する必要があり、伝統的な方式で直接ページで取得することはできない.vueではlocationを通過できないからだ.search()はurl疑問符の後の内容を取得する.
もちろん,この問題にも解決策があり,パラメータを取得するスクリプトコードをグローバルメソッドに登録すればよい.以下はあまり話さないので、詳しい方法の例を見てみましょう.サンプルコードの第一歩:utilsを作成する.jsファイルをプロジェクトルートディレクトリに保存

export  function getUrlKey(name){
    return decodeURIComponent((new RegExp('[?|&]' + name + '=' + '([^&;]+?)(&|#|;|$)').exec(location.href) || [, ""])[1].replace(/\+/g, '%20')) || null
}

ステップ2:メインjsメソッド(main.js)にグローバルメソッドを登録する

import utils   from './utils'    //  url  
 
Vue.prototype.$utils=utils   //

ステップ3:vueファイルでの参照方法

import {getUrlKey} from './getUrlKey.js'
data() {
    return {
        LIFNR:'',       
    }
},
created(){
        //    ：`http://localhost:9527/#/newPage?LIFNR=1000000524`
    //       
        this.LIFNR = getUrlKey('LIFNR')
        console.log(this.LIFNR)  //1000000524
},

なるべく手間をかけずEC2インスタンスのPublic IPを取得してみた

boostメモリプール(pool)