ページパス値
ページ値の受け渡しは一般に、ページがジャンプするときにページ ルートの後にパラメータを追加し、ターゲット ページがレンダリングされた後にルートに含まれる情報を読み取ります。
ページ 1 からページ 2 にジャンプするコードの説明は次のとおりです。
ページ 1: ルーティング ページ 1
goPage2(row) {
this.$router.push({
name: 'page2',//跳转到第二个页面
query: {
//路由后面携带的信息
id: row.id,
type: 1
}
})
}
ページ 2: ルーティング ページ 2
データ属性を定義し、ページ要素がロードされた後に属性値を初期化します。
<template>
<div>
<span v-if="type === 1">这是数字一</span>
<span v-else>{
{
typeof(type)}}</span>
</div>
</template>
<script>
export default {
components: {
},
data: function() {
return {
id: '',
type: ''
}
},
mounted() {
this.id = this.$route.query.id
this.type = this.$route.query.type
},
methods: {
}
}
値を渡すときはデータ型に注意してください
値を渡すときは、渡されるデータ型に注意する必要があります。
たとえば、上記の例で渡された値の型では、ページ 1 からページ 2 に数値 1 を渡しました。ページ 2 は次のように表示されます。見た目は正常で、値は正常に渡されていますが、ページを更新するとページ 2 は次のように表示され、この時点の型が数値 1 ではなくなっていることが示され
ます
。
その理由は、ページを更新した後、ブラウザがルーティング アドレス内のすべての数値を文字列に変換するためであり、数値 1 と一致してはなりません。
そのため、ページ上で値を渡す際、データ比較に使用する必要がある一部の値については、データ型の変更を避けるために、一律に文字列型を使用して転送することができます。
つまり、ページで値を渡すときに、データ型を指定します。
goPage2(row) {
this.$router.push({
name: 'page2',//跳转到第二个页面
query: {
//路由后面携带的信息
id: row.id,
type: String(1) //指定为字符串 页面刷新后不影响数据类型
}
})
}
コンポーネントのパス値
まずコンポーネントを定義します
<template>
<div>
<pre>姓名：{
{
name}}；年龄：{
{
age}}</pre>
</div>
</template>
<script>
export default {
props: {
name: {
//接收属性
type: String,
default: () => ''
},
age: {
//接收属性
type: Number,
default: () => ''
}
},
data: function() {
return {
}
}
}
</script>
次に、それを親コンポーネントで使用し、値を子コンポーネントに渡します。
<template>
<Page2 :name="'阿龙'" age="18" /> //传递属性
</template>
<script>
import Page2 from './Page2.vue'
export default {
components: {
Page2
},
data: function() {
return {
}
}
}
</script>
ページ表示の内容は以下の通りですが
、コンポーネントのプロパティでコロンを使用した場合、後からプロパティを受け取ります。値はコロンなしで受け入れられます。
- :name="'Aaron'" ▶ 名前: Aaron; // 属性を渡すことを示し、属性値は文字列 Aaron
- :name="Aaron" ▶ Name:;//属性 Aaron はページ内で定義されていないため、名前は空白で直接表示されます
- name="'Along'" ▶ name: 'Along';// 文字列 'Along' の直接転送を示します (一重引用符で囲みます)。