Question

简介

我有一个处理请求/响应的函数的Node.js代码。为了解释我的问题，我将使用Express.js示例。这段代码不是我问题的一部分，但我可以向您提供一个简单的上下文来帮助您回答我的问题。所以我的代码将放在app.get处理程序中，假设app是Express.js实例：

app.get("/", function (request, response, next) {
    // The code below could be here...
});
app.get("/test/", function (request, response, next) {
    // ...and here...
});
app.get("/*", function (request, response, next) {
    // ...and here...
});

response是我将发送给客户的response的代表，我将用Vue渲染器结果填充它。
request包含有关执行此部分代码的客户端的所有信息。

我的代码

假设我的代码是从/路由运行的，代码例如如下：

app.get("/", function (request, response, next) {
    var Vue = require("vue"),
        VueRouter = require("vue-router"),
        renderers = require("vue-server-renderer"),
        renderer = renderers.createRenderer();

    global.Vue = Vue;
    Vue.use(VueRouter);

    stream = renderer.renderToStream(new Vue({
        template: "<div><router-view></router-view><div>",
        router: new VueRouter({
            routes: [{
                path: '/', 
                component: { template: '<div>foo</div>' }
            }, { 
                path: '/test/', 
                component: { template: '<div>bar</div>' }
            }, { 
                path: '/*', 
                component: { template: '<div>baz</div>' }
            }]
        })
    }));

    response.write("<html><head><title>test</title></head><body>");

    stream.on('data', function (chunk) {
        response.write(chunk);
    });

    stream.on('end', function () {
        response.end('</body></html>');
    });
});

当调用response.end时，发送给客户端的内容是

<html><head><title>test</title></head><body><div server-rendered="true"><!----></div></body></html>

我们可以看到路由器应该显示组件的部分是所以我猜它是因为对于路由器，没有路由实际匹配我的代码。

问题

如果没有路由匹配，为什么结果不是以下内容：

<html><head><title>test</title></head><body><div server-rendered="true"><div>baz</div></div></body></html>

和

在这种情况下，如何通知我的路由器当前网址为/以生成此代码：

<html><head><title>test</title></head><body><div server-rendered="true"><div>foo</div></div></body></html>

并且例如，如果我当前的请求来自/test/

，则使用以下代码

<html><head><title>test</title></head><body><div server-rendered="true"><div>bar</div></div></body></html>

等

答案

感谢Ilya Borovitinov（https://stackoverflow.com/a/42872542/2412797）的回答，我之前的代码变成了：

app.get("/", function (request, response, next) {
    var Vue = require("vue"),
        VueRouter = require("vue-router"),
        renderers = require("vue-server-renderer"),
        renderer = renderers.createRenderer(),
        router = new VueRouter({
            routes: [{
                path: '/', 
                component: { template: '<div>foo</div>' }
            }, { 
                path: '/test/', 
                component: { template: '<div>bar</div>' }
            }, { 
                path: '/*', 
                component: { template: '<div>baz</div>' }
            }]
        });

    global.Vue = Vue;
    Vue.use(VueRouter);

    stream = renderer.renderToStream(new Vue({
        template: "<div><router-view></router-view><div>",
        router: router
    }));

    /* THIS IS THE SOLUTION */
    router.push(request.url);

    response.write("<html><head><title>test</title></head><body>");

    stream.on('data', function (chunk) {
        response.write(chunk);
    });

    stream.on('end', function () {
        response.end('</body></html>');
    });
});

Answer 1

您正在尝试在环境中使用vue-router，该环境不提供路由器使用的显式地址。要实际强制路由器呈现正确的路径，您需要调用router.push(currentUrl)进行注册。

使用Node.js

1 个答案: