菜单

js_脚本之家

2020年3月31日 - www.2138.com

Vue Router 是 Vue.js 官方的路由管理器。它和 Vue.js
的核心深度集成,让构建单页面应用变得易如反掌。包含的功能有:

今天做项目时踩到了vue-router传参的坑,所以决定总结一下二者的区别。

www.2138.com,嵌套的路由/视图表 模块化的、基于组件的路由配置 路由参数、查询、通配符
基于 Vue.js 过渡系统的视图过渡效果 细粒度的导航控制 带有自动激活的 CSS
class 的链接 HTML5 历史模式或 hash 模式,在 IE9 中自动降级
自定义的滚动条行为

1.jquery方式传参和接收参数

js_脚本之家。vue-router传参两种方式:params和query

this.$router.push({ path:'/xxx' query:{ id:id } }) 

params、query是什么?

this.$route.query.id

params:/router1/:id ,/router1/123,/router1/789 ,这里的id叫做params
query:/router1?id=123 ,/router1?id=456 ,这里的id叫做query。

注意:传参是this.$router,接收参数是this.$route,这里千万要看清了!!!

方法1:

this.$router 和this.$route有何区别?

query 方式传参和接收参数

在控制台打印两者可以很明显的看出两者的一些区别:

this.$router.push({ path:'/openAccount', query:{id:id} });

1.$router为VueRouter实例,想要导航到不同URL,则使用$router.push方法

this.$route.query.id

2.$route为当前router跳转对象,里面可以获取name、path、query、params等

注意:传参是this.$router,接收参数是this.$route 两者区别:

2.params方式传参和接收参数

$router为VueRouter实例,想要导航到不同URL,则使用$router.push方法

this.$router.push({ name:'xxx' params:{ id:id } }) 

$route为当前router跳转对象,里面可以获取name、path、query、params等

this.$route.params.id

方法2:

注意:params传参,push里面只能是
name:’xxxx’,不能是path:’/xxx’,因为params只能用name来引入路由,如果这里写成了path,接收参数页面会是undefined!!!

params方式传参和接收参数

另外,二者还有点区别,直白的来说query相当于get请求,页面跳转的时候,可以在地址栏看到请求参数,而params相当于post请求,参数不会再地址栏中显示。

 this.$router.push({ name:'/openAccount', params:{ id: id } })

总结

接收参数:this.$route.params.id

以上所述是小编给大家介绍的浅析vue-router jquery和params传参$router
$route的区别,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持!

注意:params传参,push里面只能是
name:’xxxx’,不能是path:’/xxx’,因为params只能用name来引入路由,如果这里写成了path,接收参数页面会是undefined!!!

二者还有点区别,可以理解为:query相当于get请求,页面跳转的时候,可以在地址栏看到请求参数,而params相当于post请求,参数不会再地址栏中显示

export default new Router({ routes: [ { path: '/', name: 'login', component: Login }, { path: '/register', name: 'register', component: Register }})

  {{ msg }} click here to news page export default { name: 'HelloWorld', data () { return { msg: 'Welcome to Your Vue.js App' } }, methods:{ routerTo(){ this.$router.push({ name: 'register', params: { userId: 123 }});//params方式 这里的name值是在定义route.js时中的name //this.$router.push({ path: '/register', query: { userId: 123 }}); //query方式 } }}

  {{this.$route.params.userId}}或者{{this.$route.params.userId}} 

总结

以上所述是小编给大家介绍的vue-router传参的两种方式,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持!

相关文章

发表评论

电子邮件地址不会被公开。 必填项已用*标注

网站地图xml地图