VueJS vue-router not rendering params

Question

I have a vue-router app and it's not picking up my passed params, here is my code for the component

<template>
<div id="container">
    <section class="content" id="error-display">
        <div class="row">
            <div class="col-sm-12">
                <article class="col-sm-offset-1 col-sm-3">
                    <img src="images/smurf.png" alt="Smurf - Grouchy">
                </article>
                <article class="col-sm-7">
                    <h1>{{ $route.params.code }}</h1>
                    <p>{{ $route.params.message }}, Go back <a href="#">home</a></p>
                </article>
            </div>
        </div>
    </section>
</div>

and here is the declaration of my vue-router

const router = new VueRouter({
    routes: [
        { path: '/error', component: { template: '<error></error>' } }
    ]
});

and this is the code i am using to navigate

router.push({ path: 'error', params: { code: 404, message: 'Resources not found' } })

am i missing something or am i doing anything wrong? Because the params are rendered as empty. Thanks in advance

Andy Gaskell · Accepted Answer · 2017-06-10 23:00:00Z

1

You don't have params defined for the route.

A route like { path: '/error/:code/:message', component: { template: '<error></error>' } } should work, but it's worth considering using query instead of params in this instance because /error/404/Resources%20not%20found is kind of an odd URL.

answered Jun 10, 2017 at 23:00

Andy Gaskell

31.8k6 gold badges79 silver badges84 bronze badges

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

Collectives™ on Stack Overflow

VueJS vue-router not rendering params

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