CODEWITHSUNDEEP
vue.jsvue-router
lulliezy
lulliezy

Reputation: 2063

VueJS vue-router not rendering params

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

Upvotes: 0

Views: 707

Answers (1)

Andy Gaskell
Andy Gaskell

Reputation: 31761

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.

Upvotes: 1

Related Questions