Vue.js のルーティングパラメーター-jsチュートリアル-php.cn

Vue.js のルーティングパラメーター

php中世界最好的语言

リリース： 2018-03-13 14:38:08

オリジナル

1489 人が閲覧しました

今回は、Vue.js のルーティングパラメーターについて説明します。Vue.js のルーティングパラメーターを使用する際の注意事項について、実際に見てみましょう。

機能: ページのルーティングパラメータを渡します。

ルーティングマッピングテーブルに渡す必要があるパラメータを設定します:
例: Apple ページ、カラーパラメータを渡す必要があります。パラメータは次から始まります。 : パス内。

path: &#39;/apple/:color&#39;,

ログイン後にコピー

具体的な使用法:

let router = new VRouter({ // 如果mode设为history, 那么地址就可以不使用哈希(# 哈希)了,就可以直接访问. http://localhost:8080/#/apple ==>> http://localhost:8080/apple
  mode: 'history',  routes: [    //  做一个映射表
    {      path: &#39;/apple/:color&#39;,      component: Apple
    },
    {      path: '/banana',      component: Banana
    }
  ]
})

ログイン後にコピー

ページにジャンプするとき、アドレスの直後にパラメータを結合します。下の赤色は渡されたカラーパラメータです。

http://localhost:8080/apple/red

ログイン後にコピー

ページによって渡されたパラメータを取得します。 this.$route .params global object を使用して

<template>
  <div class="hello">
    <h1>{{msg}}</h1>
    <button @click="getParams">get params</button>
  </div></template><script>
  export default {
    data () {      return {        msg: &#39;I am componnet apple&#39;
      }
    },    methods: {
      getParams () {        console.log(this.$route.params)
      }
    }
  }</script>

ログイン後にコピー

を取得するための script タグ$route.params.color を使用します

<template>
  <div class="hello">
    <h1>{{msg}}</h1>
    <p>{{$route.params.color}}</p>
    <button @click="getParams">get params</button>
  </div></template>

ログイン後にコピー

複数のパラメータを渡します

ルート内の設定は次のとおりです: Vue.js のルーティングパラメーター

path: &#39;/apple/:color/detail/:type&#39;,

ログイン後にコピー

渡されたパラメータの URL:

http://localhost:8080/apple/red/detail/3

ログイン後にコピー

渡されたすべてのパラメータを出力します:

{color: "red", type: "3"}

ログイン後にコピー

Iこの記事の事例を読んだ後は、この方法を習得したと信じてください。その他の

関連記事については、php 中国語 Web サイト

にご注意ください。

推奨読書:

Vue.js の Vue タグ属性と条件付きレンダリング

Vue.js v-for 配列オブジェクトサブコンポーネントのリストレンダリング

以上がVue.js のルーティングパラメーターの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

Vue.js のルーティング パラメーター

Vue.js のルーティングパラメーター