乐趣区

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 里面

退出移动版