举例说明Vue.js中路由器的参数

Vue路由器的参数传输

为什么要在路由器中传递参数

想象一个场景，你需要点击一个项目，在主页上查看它的详细信息。这时候就需要把主页上这个项目的id传到详情页，详情页可以通过id获取详细信息。

虚拟路由器参数传输方式

帕尔马传记

粘贴代码：

/router/index.vue

导出默认新路由器({route: [{path:'/'，名称：' home '，组件： home}，{ path : '/' Work '，名称3360' work '，组件3360 work}]})组件Works将工作id传输到组件Work

/组件/家庭/帐篷/工厂

//触发它将对象传递给组件workget it (id) {this。$ router.push ({path:'/work '，name:' work '，params 3360 { id 3360 id } })}/components/work/index . vue。

模板div class=' work ' work : { { id } }/div/模板脚本导出默认值{name:' work '，data () {return {id3360this。$ route.params.id//get id } } }/脚本运行截图：

查询传输参数

将上面的参数改为查询，即：

//传这个。$ router.push ({path:'/work '，name:' work '，query: {id3360id}}).这个。$ route.query.id//get帕尔马斯和query的区别

查询是通过url传递的参数，并且总是出现在url中

帕尔马斯传输参数。刷新页面后，没有数据，无法保存获取的参数

总结：这两种参数的传输方式各有各的用处，你要自己去尝试，才知道前端领域还需要更多的动手实践。