ページロードまたはプログラムによるナビゲーションでのVueルータリンクパラメータ

Question

ルータビューでアクセスできるように、paramsを通過するv-forを使用してルータリンクを作成します。今は、$ router.goや外部URLでナビゲートするなど、リンクをクリックする以外の方法でルートにアクセスしたときにルートプロップを利用できるようにする必要があります。このデータを既存のルータリンクからプル/同期するにはどうすればよいですか？

<article :key="no"> 
    <h1> {{ no }} {{ title }} </h1> 
</article> 

ルート：：アイテムのコンポーネント内

<router-link 
    v-for="item in items" 
    :to="{ 
    name: 'Item', 
    params: { 
     url: `${item.no}-${item.title.replace(/\s+/g, '-')}`, 
     no: item.no, 
     title: item.title 
    } 
    }"> 
    {{item.no}} 
    {{item.title}} 
</router-link> 

export default new Router({ 
    routes: [ 
    { 
     path: '/:url', 
     name: 'Item', 
     component: Item, 
     props: true 
    } 
    ] 
}) 

Answer 1

私は、最も簡単な解決策は、私はURLでレンダリングする必要がある小道具を含めることがあると思います。このようにURLを破壊

<router-link 
    v-for="item in items" 
    :to="{ 
    name: 'Item', 
    params: { 
     no: item.no, 
     title: item.title.replace(/\s+/g, '-') 
    } 
    }"> 
    {{item.no}} 
    {{item.title}} 
</router-link> 

：

export default new Router({ 
     routes: [ 
     { 
      path: '/:no/:title', 
      name: 'Item', 
      component: Item, 
      props: true 
     } 
     ] 
    }) 

この方法は、これらの小道具

<article :key="no"> 
    <h1> {{ no }} {{ title }} </h1> 
</article> 

は直接リンクを介してルートにアクセスすることなく利用できるようになります。