vue路由跳转页面的几种方式及其区别

Posted 2023-03-14

参考技术A

场景：A页面跳转到B页面并携带参数

1.1不带参数：

1.2带参数：

2.1不带参数：

2.2 query传参

2.3 params传参

2.4 直接通过path传参

2.5 传递对象(obj不能过长否则会报错)

2.6 params和query的区别

用法同上： this.$router.push()

向前或者向后跳转n个页面，n可为正整数或负整数

1. this.$router.push
跳转到指定url路径，并在history栈中添加一个记录，点击后退会返回到上一个页面

3. this.$router.go(n)
向前或者向后跳转n个页面，n可为正整数或负整数

1. query 可以用 name 和 path 匹配路由，通过 this.$route.query.id 获取参数，刷新浏览器参数不会丢失
2. params 只能用 name 匹配路由，通过 path 匹配路由获取不到参数，对应的路由配置 path:\'/home/:id\' 或者 path:\'home:id\' ，否则刷新浏览器参数丢失
3.直接通过url传参， push(path: \'/home/123\') 或者 push(\'/home/123\') ，对应的路由配置 path:\'/home/:id\' ，刷新浏览器参数不会丢失