vue-router中$route与$router,path与name,params与query的区别梳理
一、$router和$route的区别
$router : 是路由操作对象,只写对象
$route : 路由信息对象,只读对象
栗子:
//$router操作 路由跳转
this.$router.push({ name:'hello', params:{ name:'word', age:'11' } })
//$route读取 路由参数接收
var name = this.$route.params.name;
二、路由跳转方式name 、 path 和传参方式params 、query的区别
*path 和 Name路由跳转方式,都可以用query传参
栗子:
//Router.js { path: '/hello', name: 'HelloWorld', component: helloPage } 跳转方式name this.$router.push({ name: 'HelloWorld', query: { id: 12345 } }) 跳转方式path this.$router.push({ path: '/hello', query: { id: 12345 } }) //获取路由参数信息方式: {{$route.query.id}
*path路由跳转方式,params传参会被忽略,只能用name命名的方式跳转
注意:params传参如果路由上面不写参数,也是可以传过去的,但不会在url上面显示出你的参数,并且当你跳到别的页面或者刷新页面的时候参数会丢失,要怎么解决?
解决:一、传参字符串name小的时候,可以在路由后面加参数名/router1/:name
二、name大的时候用sessionStorage;(欢迎补充)
注意:如果路由为动态路由{path: '/hello/:id',name:'hello'}
路由跳转执行this.$router.push({name: 'hello',params: obj});obj里面只要有id属性,就会自动带到URL里面
相关推荐
前端小白 2020-07-19
bowean 2020-07-05
82344699 2020-07-05
85423468 2020-06-26
80437700 2020-05-15
80437700 2020-05-11
85423468 2020-05-05
85423468 2020-07-19
ggkuroky 2020-06-17
89711338 2020-06-14
80437700 2020-06-02
85394591 2020-05-31
85394591 2020-05-15
80324291 2020-05-11
85394591 2020-05-10
87133050 2020-04-30
85497718 2020-04-29