使用Node.js在服务器端为SRR设置vue路由器中的当前请求路由_Node.js_Vue.js_Vue Router_Server Side Rendering

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

node.js vue.js

使用Node.js在服务器端为SRR设置vue路由器中的当前请求路由,node.js,vue.js,vue-router,server-side-rendering,Node.js,Vue.js,Vue Router,Server Side Rendering,导言我有一个处理请求/响应的函数的Node.js代码。为了解释我的问题，我将使用Express.js示例。这段代码不是我问题的一部分，但我可以为您提供一个简单的上下文来帮助您回答我的问题。因此，我的代码将放在app.get处理程序中，假设app是Express.js实例： app.get("/", function (request, response, next) { // The code below could be here... }); app.get("/test/", f

导言

我有一个处理请求/响应的函数的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是我将发送给客户端的响应的表示形式，我将用Vue渲染器结果填充它

请求包含有关执行这部分代码的客户端的所有信息

我的代码

假设我的代码是从/route运行的，代码如下所示：

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

我们可以看到路由器应该显示的部分，组件是，所以我猜这是因为对于路由器，没有任何路由真正匹配我的代码

问题

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

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

例如，如果我当前的请求来自/test，请执行以下代码/

等等

答复

感谢伊利亚·博罗维蒂诺夫的回答，我以前的代码变成：

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

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

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

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