vuejsルーターのオプションのパラメーター

105

特定のコンポーネントにルーティングする方法は2つあります。1つはパラメーターあり、もう1つはパラメーターなしです。オプションのパラメーターを検索しましたが、どういうわけか多くの情報を見つけることができません。

だから私のルート：

{
    path: '/offers/:member',
    component: Offers,
    name: 'offers',
    props: true,
    meta: {
        guest: false,
        needsAuth: true
    }
},

プログラムでparamを使用して呼び出すと、すべて問題ありません

this.$router.push({ path: /offers/1234 });

ただし、このようにナビで呼び出す必要もあります

<router-link to="/offers">Offers</router-link>

offersコンポーネントは、小道具を受け入れます

props: ['member'],

そのように使用されるコンポーネント

<Offers :offers="data" :member="member"></Offers>

さて、私がうまく機能させるための醜い方法は、ルートを複製して、そのうちの1つを小道具を使わないようにすることです。

{
    path: '/offers',
    component: Offers,
    name: 'offers',
    props: false,
    meta: {
        guest: false,
        needsAuth: true
    }
},

それは実際に機能しますが、私はそれに満足していません-開発モードでもvuejsは私に警告しています [vue-router] Duplicate named routes definition: { name: "offers", path: "/offers" }

コンポーネントの呼び出しでオプションのパラメータを実行する方法は確かにあります:member="member"か？

vue.js

— よよま
ソース

231

疑問符?を追加するだけでオプションになります。

{
    path: '/offers/:member?',
    ...
},

Vue Router 2.0以降で動作します。

ソース：https : //github.com/vuejs/vue-router/issues/235#issuecomment-245447122

— ジェイコブ・ゴー
ソース

20

これがガイドにあればよかった！

— デイモン

3

ありがとう、これはとても役に立ちます。これがガイドで明確に言及されていれば幸いです。

— Gaurav Joshi

1

さらに、ルートを呼び出す場所から、さまざまなパラメーターを送信することもできます。

<router-link
    :to="{
     name: 'ComponentName',
     params: { member: {}, otherParams: {} }
     }"
>

— アミット・カダム
ソース

0

高度な一致パターンについては、マニュアルはこう述べています：

vue-routerは、パス一致エンジンとしてpath-to-regexpを使用しているため、オプションの動的セグメント、ゼロ以上/ 1つ以上の要件、さらにはカスタム正規表現パターンなど、多くの高度な一致パターンをサポートしています。これらの高度なパターンと、vue-routerでのこれらの使用例については、ドキュメントをご覧ください。

path-to-regexp page / manual => https://github.com/pillarjs/path-to-regexp/tree/v1.7.0#parameters

— JCH77
ソース