URL Path

URI	path://
Path	値は設定しない場合、パスを配列として取得します。インデックス番号を指定した場合、その位置にあるパスの部分を文字列として取得します。
Example	path://4

ViewState

Retrieve URL Path

Src 属性に path:// を指定して、URL Pathを配列として取得します。

vue

<template>
 <ViewState
  v-slot="example"
  src="path://"
 >
  <div>{{ example.data }}</div>
 </ViewState>
</template>

[ "lang-ja", "integration", "sources", "url-path" ]

Set

set メソッドと配列のインデックスを使用して、URL Pathを更新します。

vue

<template>
 <ViewState
  v-slot="example"
  src="path://"
 >
  <b-button
   v-if="example.data[0]== 'lang-en'"
   color="success"
   :value="example.data"
   @click="(event: any) => example.set(0, 'lang-ja')"
  >
   Set to [lang-ja]
  </b-button>
  <b-button
   v-if="example.data[0]== 'lang-ja'"
   color="primary"
   :value="example.data"
   @click="(event: any) => example.set(0, 'lang-en')"
  >
   Set to [lang-en]
  </b-button>
 </ViewState>
</template>

PathIndex

URL Pathの一部分のみを利用する場合は、インデックスをURIに含めます。

更新するには update メソッドを使用します。

vue

<template>
 <div>
  <ViewState
   v-slot="example"
   src="path://0"
  >
   <b-button
    v-if="example.data == 'lang-en'"
    color="success"
    :value="example.data"
    @click="(event: any) => example.update('lang-ja')"
   >
    Set to [lang-ja]
   </b-button>
   <b-button
    v-if="example.data == 'lang-ja'"
    color="primary"
    :value="example.data"
    @click="(event: any) => example.update('lang-en')"
   >
    Set to [lang-en]
   </b-button>
  </ViewState>
 </div>
 <div>
  <ViewState
   v-slot="example"
   src="path://3"
  >
   <b-button
    color="warning"
    :value="example.data"
    @click="(_event: any) => example.update('state')"
   >
    Set to [state]
   </b-button>
  </ViewState>
 </div>
</template>

Bootstrap

URL Path

ViewState

Retrieve URL Path

Set

PathIndex