Summary of vue routing transfer and jumping to different interfaces

Recently, I am working on a mall project for a public account, mainly using VUE+MUI. In fact, today's point is the most basic for front-end workers who have project experience, but it is also necessary to master it. Today, the editor mainly records some summary of the transmission parameters and jumps (for reference only).

First, let’s put the code first!

<router-link :to="{path:'/editaddress',query:{ id: }}"> 
  <div class="top_left_center">
     <img src="/static/images/details/" alt="" class="location_img">
      &lt;span style="color:#f40;font-size:15px;">Click to edit</span>  &lt;/div&gt;
&lt;/router-link&gt;　

This is my commonly used method of passing parameters and jump routes. Let's talk about this code shortly. In router-link: to, the content of the protagonist (jump, pass parameters). In fact, after we get the data traversal from the background, each corresponding id will have. The query:{id:item,id} used here is actually to pass the corresponding id of the traversal to the path

The corresponding interface often appears on the list page to the details page (of course not just here, it is used in many places).

There is still a redundant way to pass parameters:

query and params:

a. Like this:to="{path:'/editaddress',query:{ id: }} is a query that passes values; this:to="{path:'/editaddress',params:{ id: }}, there is no difference between passing values ​​in the two ways.

But for example, when introducing a value on the details page, = this.$ --->params are introduced; = this.$---->query is introduced (of course, it is OK to use name)

For websites that need security protection, you can actually select params here-->name (no paths such as index/login)--->of course this is just a safe method of query.-->path (display? parameters such as index/login?id=1&&name=asd).

This method that needs to be explained will lose data when refreshing some pages, which is not very stable. Here is another method of passing parameters to solve this problem. Let’s look at the code first:

('shop/ce/' + this.product_id +'? num='+ ,{
          id:this.product_id,
          num:,
        }).then((response) => {
          if(response){
            (this.product_id)
            this.$({path:'/order?pid='+this.product_id})
          }  
        }).catch((ex) => {
        ()
        })

The request above is just an axios request method I encapsulated (mainly for convenience, not to say much). Looking at the red line, the argument transmission in this place is actually very good. I am defining a variable reception id, because it is written in the jump path. In this way, when refreshing, people will always carry this ID, and the data will naturally not be lost. Use it on the page that needs to accept the ID.

Save this.product_id = this.$ and it will be OK. Therefore, I think this method is very good and I need to pay more attention.
Since we have said that, what we often use is to grab different ids and pass them to the background. Common ones are to click on products with different lists to get the corresponding IDs. Here I will talk about the method I use (this is just a record).

<div class="main" v-for="(item,index) in Unpaycontent" :key="index">
            <div class="main_top">
              <div class="imgContral">
                <img :src="item.goods_image">
                <div class="describtion"><a>To be paid</a></div>
              </div>
              <div class="details"><p style="color:#000;">{{item.goods_name}}</p></div>
              <div class="main_topright">
                <p>{{}}</p>
                <p>×{{}}</p>
              </div>
              <div class="top_bottom">
                <span style="float:right;">total：<a style="color:red;">{{item.total_price}}</a></span>
              </div>
            </div>
            <div class="main_bot">
                <a @click="click()">Pay now</a>
            </div>
          </div>

It’s still a red line, because we pass it when clicking, which solves the headache of passing different IDs. When accepting methods in methods, you can easily define a good name and change the ID and pass it to the background. In order to display it in detail, please post the code.

getallData (index) {
      ('/shop/orders'+index, {
        
        }).then((response) => {
         
        }).catch((ex) => {
      }) 
    },

I turned it into an index here, and the others were happily solved for the background.

This article mainly summarizes the transmission of ginseng. If there are other good methods for transmission of ginseng or if I write this article incorrectly, please give me some advice!

The above is a detailed explanation and integration of vue routing to different interfaces introduced by the editor. I hope it will be helpful to everyone. If you have any questions, please leave me a message and the editor will reply to everyone in time. Thank you very much for your support for my website!