VueJS vue-router 不渲染参数

Question

我有一个 vue-router 应用程序，它没有获取我传递的参数，这是我的组件代码

<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>

这是我的 vue-router 的声明

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

这是我用来导航的代码

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

我是不是遗漏了什么或者我做错了什么？因为参数被渲染为空。提前致谢

Answer 1

您没有为路线定义参数。

像 { path: '/error/:code/:message', component: { template: '<error></error>' } } 这样的路由应该可行，但在这种情况下值得考虑使用查询而不是参数，因为 /error/404/Resources%20not%20found 有点奇怪 URL.

VueJS vue-router 不渲染参数

VueJS vue-router not rendering params

vue.js

vue-router