使用 Node.js 在 vue-router 中为服务器端的 SRR 设置当前请求路由答案

【问题标题】：Set current request route in vue-router for SRR in server-side with Node.js使用 Node.js 在 vue-router 中为服务器端的 SRR 设置当前请求路由
【发布时间】：2017-08-09 20:45:31
【问题描述】：

简介

我有这个来自处理请求/响应的函数的 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 Renderer 结果填充它。
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>

和

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

<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>');
    });
});

【问题讨论】：

标签： node.js vue.js vue-router server-side-rendering

【解决方案1】：

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

【讨论】：