javascript - Vue.js SSR : Can I have a multi-page single-page application?

标签 javascript node.js vue.js single-page-application server-side-rendering

我知道这听起来像是一个巨大的矛盾,确实如此,但我不知道如何用其他方式表达它。

似乎使用 vue server-side-rendering 只能有单页应用程序。

但出于多种原因,我需要一个包含多个真实服务器端生成页面的应用程序,这些页面具有真实 URL,并且每个页面的行为都像 vue js 提供的单页面应用程序。

例如这些将是服务器端路由(即 URL):

/
/contact
/articles
/authors

然后我希望能够在每个服务器生成的页面上挂载 vue 客户端路由

/articles/lastweek
/articles/nextweek

lastweek 和 nextweek 是客户端路由。作者也一样

/authors/sports
/authors/politics
/authors/lifestyle

体育、政治和生活方式将成为客户端路线。

因此/articles 和/authors 的行为就像它们都是单页应用程序一样,除了它们不是,因为它们是服务器生成的页面。

我希望这听起来不会太奇怪。

最佳答案

是的,你可以做到!我们刚刚开始在我的工作中以这种精确的方式实现 vue。您需要做的就是在每个服务器生成的页面上包含 vue.js 脚本,然后为每个服务器 View 使用不同的 vue 应用程序。我们使用文件夹结构来保持组织有序。

src
--content
----articles
------lastweek.css
------lastweek.js
------nextweek.css
------nextweek.js
----author
------sports.css
------sports.js
....

所以每个 View 都会得到它自己的 cssjsjs 是 View 的 vue 应用程序。您可以采用最适合您的项目的任何方式来构建您的项目,我只是想发布一个示例。

关于javascript - Vue.js SSR : Can I have a multi-page single-page application?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/48385518/

相关文章:

JavaScript:是否可以将变量传递到分配给变量的回调函数中?

javascript - 扫描 html div 类以获取消息

javascript - <body> 元素上的 jQuery.offset() 提供了错误的 "top"值

javascript - 如何获取href值?

node.js - retrofit 未根据要求附加车身

node.js - 使用 connect 进行路由 - 类似于express

node.js - 数据存储区未删除实体

vue.js - 如何仅在页面加载后启动观察者。

vue.js - 使用文件夹的动态路由中的可选 slug

javascript - v-for 中的未知属性使用 Vue