params - 命名的路由，加上参数讓路由建立 url

動態的參數前要加上冒號 ":"

let router = new VueRouter({
    routes:[
        {   // 內頁
            path: '/pdp/:id', 
            name: 'product-detail-page',
            component: DetailPage
        }
    ]
})

DetailPage 組件裡可以任意調用 vue router

methods:{
    watchContent(){
        this.$router.push({ name:'product-detail-page', params:{id:'computer'} });
    }
},

url 結果是 /pdp/computer /pdp/123 /pdp/acb123 都會導到 product-detail-page 頁面，因為上述路徑都符合 /pdp/+一組字串。
若要過濾 id 總是呈現數字，就可以用正規表達式來篩選傳入的 id ，這樣符合全是數字的 id 時，才會被導引到此頁面。

query - 帶查詢參數

methods:{
    watchContent(){
        this.$router.push({ name:'product-detail-page', query:{filter:'關鍵字查詢'} });
    }
},

url 結果是 product-detail-page?filter=關鍵字查詢

參考來源：
https://next.router.vuejs.org/guide/essentials/dynamic-matching.html