【Vue】params vs. query | Vue Router

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