vue router页面跳转及传参？

一、 router-link跳转

二、this.$router.push()

三、 this.$router.replace()

四、注意 query 和 params 之间的区别，灵活使用

* query：类似get

* params：类似post

场景一：把当前页面展示的数据在另一个页面使用

页面1：数据展示以及路由跳转传参

页面2：接收页面1展示的已存在的数据

页面3：接收页面1传入的编号数据 和 页面2传入的金额数据

vue router页面跳转及传参？

一、 router-link跳转

### 1.不带参数，name,path都行, 建议用name 
<router-link :to="{name:'home'}"> 
<router-link :to="{path:'/home'}">
 
###2.带params参数
<router-link :to="{name:'home', params: {id:10001}}"> 
 
###3.带query参数
<router-link :to="{name:'home', query: {id:10001}}"> 

二、this.$router.push()

### 1.不带参数
this.$router.push('/home')
this.$router.push({name:'home'})
this.$router.push({path:'/home'})

### 2. query传参 
this.$router.push({name:'home',query: {id:'10001'}})
this.$router.push({path:'/home',query: {id:'10001'}})
 
### 3.params传参
this.$router.push({name:'home',params: {id:'10001'}}) // 只能用 name

三、 this.$router.replace()

###1. 不带参数
this.$router.replace('/home')
this.$router.replace({name:'home'})
this.$router.replace({path:'/home'})
 
###2. query传参 
this.$router.replace({name:'home',query: {id:'10001'}})
this.$router.replace({path:'/home',query: {id:'10001'}})
 
###3. params传参
this.$router.replace({name:'home',params: {id:'10001'}}) // 只能用 name

四、注意 query 和 params 之间的区别，灵活使用

* query：类似get

      1. 跳转后参数会拼接在url后面，不安全 密码之类还是用params；
      2. query刷新页面id还在；
      3. query中 html 取参：$route.query.id
      4. query中 script 取参：this.$route.query.id

* params：类似post

      1. 跳转之后页面url后面不会拼接参数, 但是刷新页面id会消失。
      2. 不配置path ,第一次可请求,刷新页面id会消失
      3. 配置path,刷新页面id会保留
      4. params 路由配置：path: "/home/:id" 或者 path: "/home:id" ,
      5. params中 html 取参：$route.params.id
      6. params中 script 取参：this.$route.params.id

场景一：把当前页面展示的数据在另一个页面使用

通过路由传参拿到跳转前页面数据并在页面使用传来的数据

使用场景：用户在充值页面输入的账号和充值金额，跳转到充值成功页面展示数据！

页面1：数据展示以及路由跳转传参

1. 数据渲染：
表具编号:<span>{{ numberForm.number }}</span>

2. data 里面定义数据：
return {
  numberForm: {
    number: "11111111",
  },
};

3. 方法里面通过路由传参把当前充值编号传到下个页面
methods: {
  biaojuchongzhi() {
    this.$router.push({
      name: "biaojuchongzhi",
      params: { number: this.numberForm.number },
    });
  },
},

页面2：接收页面1展示的已存在的数据

1. 数据渲染：v-model="chongzhiForm.money"

2. 接收页面 1 路由传过来的编号参数
data() {
  return {
    chongzhiForm: {
      number: this.$route.params.number,
      money: "",
    },
  };
},
3. 方法里面通过路由传参把当前充值·编号·和·金额·传到下个页面
methods: {
  onSubmit(values) {
    this.$router.push({
      name: "paysuccess",
      params: {
        number: this.chongzhiForm.number,
        money: this.chongzhiForm.money,
      },
    });
  },
},

页面3：接收页面1传入的编号数据 和 页面2传入的金额数据

1. 数据渲染：
表具编号：<span>{{number}}</span>
充值金额：<span class="bold">￥{{money}}</span>

2. 接收上个页面通过路由传来的数据：
data() {
  return {
    number: this.$route.params.number,
    money:  this.$route.params.money,
  };
},