动态路由匹配:
const router = new VueRouter({ routes: [ // 动态路径参数 以冒号开头 { path: '/user/:id', component: User } ] })
路由组件传参(query 传参)
this.$router.push({ path: `/analysis/eventCreate`, query: { id:this.id } })
感觉两者达到的效果是差不多的,都是给路由组件传参。只不过动态路由匹配在 url 上看不到参数名,而 query 传参的方式是放在?后面且能看到参数名和值。
只是显示上的区别吗?
query 传参的方式完全能满足使用需求,为啥官方要出一个动态路由匹配呢?
有什么优势吗?
params
传参更加贴合 RESTful
架构的特征,便于记忆,对资源的表述更清晰;
例如sf,sf.gg/q/:id
,sf.gg/u/:id
各自代表问题页和用户资料页
使用 query
传参更贴合 get
请求的形式,比如分页场景。
你用 params
传递分页多参数看看? /:sid/:size/:page
=> /6702C6712C675/1/15
这样? 太麻烦了,明显用 query
传参就明了很多 /list?id=6702C6712C675&size=15&page=3
根据不同的业务场景选择最合适的方式。
###上面都说的很全面, 我再补充一个点, 比如你做秒杀页面, 页面是ssr生成好的, 直接靠id获取页面, 而不是在页面里面获取id再请求商品, 这是秒杀页面的一个优化点。
###前者通过路由层级,可以更好的体现网站信息逻辑。比如 /users
是用户列表,/user/1
是 ID 为 1 的用户,/user/1/logs
是 ID 为 1 的用户的日志,/user/1/log/2
是 ID 为 1 的用户的第二条日志。
后者通常强调对同一功能的不同操作,比如翻页、筛选。
打个比方,你用勺子也能吃饭,为啥还要叉子、筷子?方向不一样。
###静态形式的 URL 对 SEO 友好,对人肉记忆也友好。
就拿你这个问题的 URL 来说:
https://segmentfault.com/q/1010000039327371
你就处理成(举例子,思否显然是不支持的):
https://segmentfault.com/q?id=1010000039327371
行不行?
太行了。