Summary of the way vue route jump carrying parameters

1. <router-link> mode jump

1. Carry query parameters

 &lt;router-link to="/detail?id=001&amp;title=information001"&gt; information001&lt;/router-link&gt;

&lt;router-link :to="{
        name: 'detail',
        path: '/detail', 
        query: {
                id: '001',
                title: 'Message 001'
        }
}"

Note: This method does not require routing configuration, just choose name and path in the to attribute object form.

At this time, the browser address is: http://localhost:8080/detail?id=001&title=Message 001

The received parameters are:

2. Carry params parameters

<router-link :to="`/detail/${id}/${title}`"> {{ title }} </router-link>

&lt;router-link :to="{
        name: 'detail',
        path: '/detail',
        params: {
                id: '001',
                title: 'Message 001'
        }
}"

Note: This method requires modifying the routing configuration, and in the object form of to, you can only use name to match the route.

{
       name: 'detail',
        path: '/detail/:id/:title'
        component: Detail
}

At this time, the browser address is: http://localhost:8080/detail/001/Message 001

The received parameters are:

3. Convert parameters to props attributes

We can use the props attribute to receive the parameters carried by params/query in the component by configuring the props attribute when routing. This way, we can use it directly when using it, and there is no need for the form of $/$

Configuration method:

{
    name:'detail',
    path:'/detail',
    component: Detail,
 
    /**
     Method 1: The value is an object, and the key-value in the object will be passed to the Detail component in the form of props.
     But the passed values are the same, not recommended
     props: {
          id: '123',
          title: 'Message 001',
     },
     **/
 
    /**
     Method 2: The value is a Boolean value. If the Boolean value is true, all params parameters received by the component will be passed to the Detail component in the form of props. However, this method is only applicable to params parameters.
     props: true,
     **/
 
    /**
     Method 3: The value is a function, the built-in parameter $route can be used to assign the structure
     **/
    props({query}){
        return {id: , title: }
    },

I also learned a form of structure and structure

props({ query: { id, title } }) {
        return { id, title }

2. Programming method jump route

The route is redirected by writing code. There are two ways to jump, one is push and the other is replace. They are all functions on $router (exist on the VueRouter prototype). The carrying parameters at this time are:

this.$({
    name:  'detail',
    params: {
        id: xxx,
        title: xxx
    },
    /**
    query: {
        id: xxx,
        title: xxx
    }
    **/
})
 
this.$({
    name:  'detail',
    params: {
        id: xxx,
        title: xxx
    },
    /**
    query: {
        id: xxx,
        title: xxx
    }
    **/
})

Note: No matter what method you jump, if you want to receive different params in the tag, you need to use /: placeholder during routing configuration, otherwise you can only receive parameters brought by the first time you open it.

Summarize

This is the article about vue route jump carrying parameters. For more related vue route jump carrying parameters, please search for my previous article or continue browsing the related articles below. I hope everyone will support me in the future!