序文

フロントエンド開発ではリンクパラメータなどの情報を使うことが避けられないので、色々な取得方法を一緒に記録してみましょう

1. 独自の取得

各種リンク情報の取得

window.locationオブジェクトは、
次のメソッドを使用して現在のページのアドレス (URL) を取得し、https://editor.csdn.net/md?not_checkout=1&articleId=131126631対応する値を取得します。

location.href現在のページのアクセスパス。「https://editor.csdn.net/md?not_checkout=1&articleId=131126631」を返します。
location.hostnameWeb ホストのドメイン名。「editor.csdn.net」を返します。
location.pathname現在のページのパスとファイル名は、「/md/」を返します。
location.portWeb ホストのポート (80 または 443)、
「」を返します。
location.protocol使用される Web プロトコル (http: または https:) は、
「https:」を返します。
location.searchパスクエリパラメーター、「?not_checkout=1&articleId=131126631」を返す
location.hash現在の場所のハッシュ。存在する場合は、「#」で始まります。

最も一般的に使用されるのは、現在の接続パラメータデータを取得することですが、対応する値はネイティブに解析されていないため、リンクパラメータオブジェクトを自分で手動で解析する必要があります。

/**
 * 获取链接参数为对象
 */
fun = (url) => {
    
    
    const search = url.split('?')[1]
    const searchArr = search.split('&')
    let params = {
    
    }
    searchArr.forEach((item) => {
    
    
        const param = item.split('=')
        params[param[0]] = param[1]
    })
    console.log(params)
    return params
}
fun(location.href);

ここに画像の説明を挿入

リンクジャンプページ

location.hrefの値を直接置き換えるだけです。
たとえば、ページをスキップしてbaidu.com直接しますlocation.href = 'https://baidu.com'。値が異なるプロトコルのリンクにジャンプする場合は、Web プロトコルを使用する必要があることに注意してください。同じプロトコル内のリンク調整はページパスで直接置き換えることができます。

通常の開発では、リンクパラメータに変換してページをジャンプする必要があるオブジェクト値が頻繁に発生します。たとえば、次のオブジェクトはリンクパラメータとして渡されます。

const params = {
    
    
	"articleId": "131126631",
	"not_checkout": "1"
}
getParamsString = (params) => {
    
    
	let urlSearch = ''
	let connector = '?'
	for(const x in params) {
    
    
	    urlSearch += `${
      
      connector}${
      
      x}=${
      
      params[x]}`
	    connector = '&'
	}
    return urlSearch
}
console.log(getParamsString(params)) // ?articleId=131126631&not_checkout=1

ページの更新

location.reload()_を実行

2、Vueの取得

リンクパラメータを取得する

1. を使用してvue-router( Vue3) を取得します。この種の値は、setup有効になるために、または対応するライフサイクルで実行する必要があります。そうでない場合は、表示されます。undefined

import {
    
     defineComponent } from 'vue'
import {
    
     useRoute } from "vue-router"
export default defineComponent({
    
    
  setup() {
    
    
  	const route = useRoute()
  	console.log(route)
  	return {
    
    }
  }

ここに画像の説明を挿入
次の情報が含まれます。

fullPathリンクパス名とパラメータ部分、つまりネイティブlocation.pathname+location.search
hash現在の場所のハッシュ。存在する場合は、「#」で始まります。同じlocation.hash
matchedコンポーネントの {@link routing records} 配列が含まれ、リダイレクトレコードや対応するサブルートなどの情報も含まれます。
meta簡単に言うと、各ルートが運ぶ情報であるルーティングメタ情報です。
nameルーティング設定の名前
paramsルーティング設定パラメータ ({ path:'/user/:id', name:“users”, …} の id など)
pathリンクパス名、と同じlocation.pathname
queryリンクパラメータ、オブジェクト形式
redirectedFromリダイレクト元情報

2. 設定外（vue2、vue3全て取得可能）の場合、例えばフック内で取得する必要がある場合は、ルーティング設定ファイルを取得することで取得可能

import Vrouter from "@/router"
Vrouter.currentRoute.value.query // vue3
Vrouter.currentRoute.query // vue2

href以下の図によると、上記よりフィールドが1 つ多く、同じであることがわかります。fullPath
ここに画像の説明を挿入

3. 図に示すように、使用してthis.$route取得します (このライフサイクル内で使用する必要があるvue2、3場合は、すべて利用可能です)。3

  ...
  created() {
    
    
    console.log('this.$route', this.$route)
  },
  ...

ここに画像の説明を挿入

ジャンプ操作

1.this.$router.push()取得するために使用します (このライフサイクル内で使用する必要があるvue2、3場合は、すべて利用可能です)3

ルーティングパスに従ってページをジャンプする

this.$router.push(path, query) // path：路由路径，query：参数信息

ルート名に従ってページを移動し、ルート設定と組み合わせて対応するparams接続パラメータを割り当てます。

this.$router.push(name, params) // name：路由名称，params：参数信息（需要结合路由配置）
this.$router.push('Register', {
    
     id: '123456'})

// 路由配置如下：
{
    
    
    path: '/register/:id',
    name: 'Register',
    component: () => import('@/views/home/register/index'),
},

2. インポートを使用してvue-routerページをジャンプします (Vue3利用可能)。有効にするためには、対応するライフサイクルuseRoute でsetup実行する必要があります。そうでない場合は、表示されますundefined。値の渡し方は最初のポイントと同じ、任意のパス名またはページにジャンプするパスアドレス（共通方法）

import {
    
     defineComponent } from 'vue'

import {
    
     useRouter, type LocationQueryRaw } from "vue-router"
/**
 * 
 * @param path 路由地址
 * @param query 参数信息
 */
const goTo = (path: string, query: LocationQueryRaw = {
     
     }) => {
    
    
  const router = useRouter()
  router.push({
    
    
    path, query: query
  })
}
export default defineComponent({
    
    
  created() {
    
    
    goTo('/')
  },
  setup() {
    
    
  	// goTo('/')
  }
})

現在のページのアドレス(URL)情報を取得したり、ページジャンプや更新などを行います。

記事ディレクトリ

序文