【Vue】vue-router页面跳转及传参：声明式导航/传参+编程式导航/传参

前言

导航分为声明式导航和编程式导航，在此基础上传参就可以分为声明式传参和编程式传参。

声明式导航

动态路由
动态路由常用的使用场景：往一个相同的组件要展示不同的数据，就可以用动态路由。

注意事项：
和传递数据（path，query）不同，动态路由必须按照格式要求传递

示例：
路由配置文件中的path格式：

path:'/home/:id'
1

路由里数据传输格式：

<router-link to='/home/1'></router-link>
1

获取跳转的数据：

this.$route.params.id
1

---

地址传参

不带参数跳转：

<router-link to='/xxx'>点击跳转</router-link>
1

带参数跳转：
path+query组合（数据在地址栏可看到，相对不安全）

<router-link :to="{path:'/xxx',query:{data:xxx}}">点击跳转</router-link>
1

path+query组合获取数据：

this.$route.query.data=xxx
1

---

path+params组合（数据在地址栏可看到，相对安全）

<router-link :to="{name:'xxx',params:{data:xxx}}">点击跳转</router-link>
1

path+params组合获取数据：

this.$route.params.data=xxx
1

---

编程式导航

不可跳转到指定路径:
向前或向后跳转n个页面，n可为正整数或负整数

this.$router.go(-1);//后退一页
1

可跳转到指定路径：

this.$router.push('/');(不携带数据跳转，一般可以直接跳转到登录页)
this.$router.replace('/');(不携带数据跳转，一般可以直接跳转到登录页)
this.$router.push('/xxx')(不携带数据跳转)
this.$router.push({path:'/xxx'})(不携带数据跳转)
this.$router.push({name:'xxx'})(不携带数据跳转，路由里需要配置name)
this.$router.push({path:'/xxx',query:{data:'data'}})//类似get请求  数据会暴露在地址栏  (携带数据跳转)
this.$router.push({name:'xxx',params:{data:'data'}})//数据不在地址栏  (携带数据跳转，路由里需要配置name)
1
2
3
4
5
6
7

补充

除了this.$router.push()还有this.$router.replace()，替换不会新增历史记录，push会产生历史记录。

this.$route和this.$router区别：
$route是“路由信息对象”，包括path、params、hash、query、fullpath、matched、name等路由信息传参。
$router是“路由实例对象”，包括了路由的跳转方法，钩子函数。

params和query区别：
1、query通过path引入，params通过name引入
2、url显示(浏览器地址栏)，query会将传递数据暴露在地址栏，params不会将传递数据暴露在地址栏。
3、query刷新不会丢失query里面的数据，params刷新会丢失params里面的数据。