众所周知，使用http进行网页的查询和导航时，是有两种url方式的，以前传统的方式是查询参数，也就是比如”xxx.com/?id=zzz”这种形式，”?”后面的id和内容，就是需要传递查询的参数。还有一种url方式，使用的是路径参数，是符合现代化restful风格的。也就是”/“后直接带上查询的路径，例如”xxx.com/user/zzz”，这种restful的接口形式，逻辑清晰、符合标准、易于理解、扩展方便，所以现在很多网站都在用了。那么在vue项目中，动态路径和查询参数这两种url形式如何实现呢。
vue动态路径参数
动态路由参数一般描述为params，使用步骤如下：
- vue-router的index,js文件中相对应路由页面的path,从path:’/user’变化为path:’/user/:id’这种写法。
- 如果使用router-link来跳转，那么标签的参数从:to=’{name:”user”}’变为:to=’{name:”user”,params:{id:xixi}}’，最终的url形式是”…/user/xixi”这种。
- 所以点击router-link元素对应的url之后，跳转到”…/user/xixi”，但是这种路径参数的形式非常不利于搜索引擎seo，因为它最后的参数永远是动态赋予的，所以搜索引擎无法抓取到具体最终的那么页面内容。一般适合于在个人中心/管理中心这种非公开页面中使用路径参数这种模式。
vue查询参数
查询参数一般描述为query，使用步骤如下：
- vue-router的index,js文件中相对应路由页面的path和普通页面无变化。
- 如果使用router-link来跳转，那么标签的参数从:to=’{name:”user”}’变化为:to=’{name:”user”,query:{userId:xixi}}’这种，最终的url形式是”…/user?userId=xixi”这种。
- 这种查询参数的形式，虽然比较古老，语义性也没有路径参数好，不过对seo比较友好，而且很多参数可以直接在url后面累加，比较粗暴快捷。