vue-router中$route与$router,path与name,params与query的区别梳理
2020-02-03 12:58
302 查看
一、router和router和router和route的区别
$router : 是路由操作对象,只写对象
route:路由信息对象,只读对象栗子://route : 路由信息对象,只读对象
栗子:
//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里面
- 点赞
- 收藏
- 分享
- 文章举报
相关文章推荐
- 浅析vue-router中params和query的区别
- 浅析vue-router jquery和params传参(接收参数)$router $route的区别
- Vue(Router) query与params传参/接收参数的区别
- vue 路由传参 params 与 query两种方式的区别
- vue-router中query和params
- vue route 指向path:'bannardetail/:code',在页面获取地址不用split截取可以有更优化的写法params
- vue 路由传参 params 与 query两种方式的区别
- Vue之嵌套router传参params与query
- vue-this.$route.query和this.$route.params的使用例子
- vue路由传参query和params的区别
- NodeJS取参的四种方法req.hostname/req.params/req.path/req.query
- router中的params和query的区别
- vue之this.$route.query和this.$route.params接收参数
- vue 路由传参 params 与 query两种方式用和的区别
- [Angular2 Router] Optional Route Query Parameters - The queryParams Directive and the Query Parameters Observable
- elementui+vue实战项目之NavMenu导航菜单选中问题,注意$router 和 $route 区别
- vue路由传参params和query区别
- vue-router params query 传参
- 报错[vue-router] Route with name ' ' does not exist
- vue中的$router 和 $route的区别