乐趣区

关于vue.js:router和route的区别路由跳转方式name-path-和传参方式params-query的区别

jiezi

一、$router 和 $route 的区别
$router : 是路由操作对象，只写对象
$route : 路由信息对象，只读对象

//$router 操作 路由跳转

// 字符串
   this.$router.push('home')
// 对象
   this.$router.push({path: 'home'})
// 命名的路由
   this.$router.push({name: 'user', params: { userId: 123}})
// 带查问参数，变成 /register?plan=123
   this.$router.push({path: 'register', query: { plan: '123'}})

//$route 读取 路由参数接管
var name = this.$route.params.name;

二、params、query 的区别

1.this.$route.query 的应用

A、传参数：

this.$router.push({
         path: '/monitor',
         query:{id:id,}
}）

B、获取参数：
this.$route.query.id
C、在 url 中模式（url 中带参数）

http://172.19.186.224:8080/#/monitor?id=1

D、页面之间用路由跳转传参时，刷新跳转后传参的页面，数据还会显示存在（我的项目中遇到此问题）

2.this.$route.params 的应用
A、传参数：

this.$router.push({
         name: 'monitor',
         params:{id:id,}
}）

B、获取参数：
this.$route.params.id
C、在 url 中模式（url 中不带参数）
http://172.19.186.224:8080/#/monitor
D、页面之间用路由跳转传参时，刷新跳转后传参的页面，数据不存在（我的项目中遇到此问题）

三、name、path 的区别

path 和 Name 路由跳转形式，都能够用 query 传参
path 路由跳转形式,params 传参会被疏忽，只能用 name 命名的形式跳转
params 传参，push 外面只能是 name:’xxxx’, 不能是 path:’/xxx’, 因为 params 只能用 name 来引入路由，如果这里写成了 path，接管参数页面会是 undefined！！！
另外，二者还有点区别，直白的来说 query 相当于 get 申请，页面跳转的时候，能够在地址栏看到申请参数，而 params 相当于 post 申请，参数不会再地址栏中显示

留神：params 传参如果路由下面不写参数，也是能够传过来的，但不会在 url 下面显示出你的参数，并且当你跳到别的页面或者刷新页面的时候参数会失落，要怎么解决？

退出移动版