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>' } }这样的路由应该可行，但在这个例子中使用查询而不是params是值得的，因为/error/404/Resources%20not%20found是一种奇怪的URL。

VueJS vue-router没有渲染参数

1 个答案: