web前端-vue-router传递多个参数3种方法

Posted 2021-12-28 MinggeQingchun

一、GET方法

1、传递值

<router-link :to="path:'/userInfo',query:  userId: 123,userName:'ming' ">跳转</router-link>
或
<router-link :to="name:'userInfo',query:  userId: 123,userName:'ming' ">跳转</router-link>

2、接收值（页面刷新的时候参数不会消失） 

this.$route.query.userId  // 123
this.$route.query.userName  // ming

3、url上显示参数：

http://localhost:8080/userInfo?userId=123&userName=ming 

二、POST方法

1、传递值

<!-- 必须用 name:'userInfo' -->
<router-link :to="name:'userInfo',params:  userId: 123,userName:'ming' ">跳转</router-link>

<!-- 用 path:'/userInfo' 无效 -->
<!-- <router-link :to="path:'/userInfo',params:  userId: 123,userName:'ming' ">跳转</router-link> -->

2、接收值（页面刷新的时候参数就会消失）

this.$route.query.userId  // 123
this.$route.query.userName  // ming

3、url上不显示参数：

http://localhost:8080/ming

三、路由方法

1、传递值

// router.js

    path: '/userInfo/:userId/:userName?', //?问号的意思是该参数不是必传项
    name: 'userInfo',
    component: 'userInfo.vue',
    props: true,
,

点击跳转方法传参

// XX.vue
<router-link to="/userInfo/123/ming">跳转</router-link>

2、接收值（页面刷新的时候参数不会消失）

3、url上显示参数

http://localhost:8080/userInfo/123/ming

注：
如果在链接上设置 replace 属性，当点击时，会调用 router.replace() 而不是 router.push()，于是浏览器不会留下 history 记录。（无法返回到上一页）

  <router-link :to=" path: '/userInfo'" replace></router-link>

$router 和 $route 的区别:

1、$router ：是指整个路由实例,你可以操控整个路由，用法如下：

this.$router.go(-1);  // 向前或者向后跳转n个页面，n可为正整数或负整数
this.$router.push('/'); // 跳转到指定url路径，history栈中会有记录，点击返回会跳转到上个页面
this.$router.replace('/'); // 跳转到指定url路径，但是history栈中不会有记录，点击返回会跳转到上上个页面

2、$route：是指当前路由实例$router跳转到的路由对象；路由实例可以包含多个路由对象，它们是**父子包含关系**

// 获取路由传递过来的参数
this.$route.params.userId  
this.$route.query.userName