Vue3 - Render query parameter

Question

I am quite new to Vue in general, especially Vue3. I have a route /mypage that takes one query parameter id such as /mypage?id=hjhj.

What I am trying to achieve is to render that query parameter on /mypage?id=hjhj

router/index.js

const isServer = typeof window === 'undefined';
const history = isServer ? createMemoryHistory() : createWebHistory();
const routes = [{
        path: '/',
        name: 'Home',
        component: Home,
    },
    {
        path: '/about',
        name: 'About',
        component: About,
    },
    {
        path: '/mypage',
        name: 'mypage',
        component: MyPage,
        props: (route) => ({
            foo: route.query.foo
        }),
    }
];

const router = createRouter({
    history,
    routes,
});

export default router;

MyPage.vue

<template>
   <h2>Home</h2>
   <h3>{{ this.foo }}</h3>
</template>

<script>
   export default {
     props: {
       foo: {
         type: String,
         default: null,
       },
     },
   };
</script>

result:

I should see hjhj below "Home"

You could do something like router.vuejs.org/guide/essentials/… — Jaroost
– Jaroost, Commented Jul 24, 2022 at 12:39
Thanks but it seems that this documentation is for Path and there is nothing for Query parameters — Pierre-Alexandre
– Pierre-Alexandre, Commented Jul 24, 2022 at 12:48
Yes sorry. you can simply do this in the home template : $route.query.id — Jaroost
– Jaroost, Commented Jul 24, 2022 at 13:00
or in the setup method: import { useRoute } from 'vue-router'; export default { setup() { const route = useRoute(); console.log(route.query.id); } } — Jaroost
– Jaroost, Commented Jul 24, 2022 at 13:07

Boussadjra Brahim · Accepted Answer · 2022-07-25 14:56:10Z

1

In templates we don't use this keyword to access the instance properties, as every variable available in template is proxied to the component instance.

<template>
   <h2>Home</h2>
   <h3>{{ foo }}</h3>
</template>

edited Jul 25, 2022 at 14:56

Boussadjra Brahim

90k19 gold badges163 silver badges183 bronze badges

answered Jul 24, 2022 at 17:09

Magiczne

1,6112 gold badges17 silver badges25 bronze badges

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

Collectives™ on Stack Overflow

Vue3 - Render query parameter

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