Vue || How To Set, Add & Update Query Params With Vue Router Using Vue

December 31, 2020 admin No comments

The following is a module which demonstrates how to set, add and update query params with Vue using Vue Router.

Note: The examples below assumes your project is already set up and configured. For an overview on how to get started with Vue and Vue Router, visit the official documentation.

1. Add & Update Query

The example below is a simple page with a login link. The link has a redirect parameter to navigate back to the referring page after successful login.

Clicking on the link results in the following:

/login?[existing query + computed result]





		
		
			1. Home.vue
			
XHTML
			
			<!--
// ============================================================================
//    Author: Kenneth Perkins
//    Date:   Dec 31, 2020
//    Taken From: http://programmingnotes.org/
//    File:  Home.vue
//    Description: Page that has a login redirect link
// ============================================================================
-->
<template>
    <section>
        <router-link :to="{name: 'Login', query: redirectQuery}">
            Log in
        </router-link>
    </section>
</template>

<script>
export default {
    data() {
        return {}
    },
    computed: {
        redirectQuery() {
            return Object.assign({}, this.$route.query, {redirect: this.$route.query.redirect || this.$route.path});
        } 
    },
};
</script>

<style scoped>
</style> <!-- http://programmingnotes.org/ -->
			
				
					
				
					1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
				
						<!--
// ============================================================================
//    Author: Kenneth Perkins
//    Date:   Dec 31, 2020
//    Taken From: http://programmingnotes.org/
//    File:  Home.vue
//    Description: Page that has a login redirect link
// ============================================================================
-->
<template>
    <section>
        <router-link :to="{name: 'Login', query: redirectQuery}">
            Log in
        </router-link>
    </section>
</template>
 
<script>
export default {
    data() {
        return {}
    },
    computed: {
        redirectQuery() {
            return Object.assign({}, this.$route.query, {redirect: this.$route.query.redirect || this.$route.path});
        } 
    },
};
</script>
 
<style scoped>
</style> <!-- http://programmingnotes.org/ -->

QUICK NOTES:
The highlighted lines are sections of interest to look out for.

The code is heavily commented, so no further insight is necessary. If you have any questions, feel free to leave a comment below.

Was this article helpful?

👍 YesNo

Posted in: JavaScript, Vue Tags: javascript, vue, vue router

Vue || How To Set, Add & Update Query Params With Vue Router Using Vue

Related

Leave a ReplyCancel reply

Search

Compile Your Code Now

Translate Page

Popular Pages

Recent

Archives

Categories