How do I pass a URL querystring in Vue?

Question

I'm trying to pass a querystring value when I open a view. I have set up my router like this:

import Home from "../views/Home.vue";
import Summary from "../views/Summary.vue";

Vue.use(VueRouter);

const routes = [
  {
    path: "/",
    name: "home",
    component: Home
  },
  {
    path: "/summary/:id",
    name: "Summary",
    component: Summary
  }
];

The home.vue has this link:

<a href="#" class="card-link" @click.prevent="goSummary(item.id)">View Item Summary</a> <!--item.id came from the v-for loop-->

The home.vue has this on the export default script

methods: {
  goSummary(id) {
    //do other things here
    this.$router.replace('Summary/'+id); //I'm supposed to see the view
  }
}

TehEbil · Accepted Answer · 2019-12-28 16:39:38Z

2

you can use :

<router-link :to="{ name: 'Summary', params: { id: item.id } }">
  View
</router-link>

or via javascript:

  this.$router.push({ name: 'Summary', params: { id: this.item.id } })

For further information, see vue router documentation

answered Dec 28, 2019 at 16:39

TehEbil

886 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

How do I pass a URL querystring in Vue?

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related