mirror of
https://github.com/nuxt/nuxt.git
synced 2025-01-19 09:55:53 +00:00
modern static for redirect is great now
This commit is contained in:
parent
5b0ff5617b
commit
78aabe480f
@ -1,5 +1,5 @@
|
|||||||
<template>
|
<template>
|
||||||
<div id="app">
|
<div id="__nuxt">
|
||||||
<% if (loading) { %><nuxt-loading ref="loading"></nuxt-loading><% } %>
|
<% if (loading) { %><nuxt-loading ref="loading"></nuxt-loading><% } %>
|
||||||
<router-view v-if="!err"></router-view>
|
<router-view v-if="!err"></router-view>
|
||||||
<nuxt-error v-if="err" :error="err"></nuxt-error>
|
<nuxt-error v-if="err" :error="err"></nuxt-error>
|
||||||
@ -17,6 +17,9 @@ export default {
|
|||||||
}
|
}
|
||||||
},
|
},
|
||||||
<% if (loading) { %>
|
<% if (loading) { %>
|
||||||
|
created () {
|
||||||
|
this.$loading = {} // for NUXT.serverRendered = false
|
||||||
|
},
|
||||||
mounted () {
|
mounted () {
|
||||||
this.$loading = this.$refs.loading
|
this.$loading = this.$refs.loading
|
||||||
},
|
},
|
||||||
|
@ -8,7 +8,7 @@ import { getMatchedComponents, flatMapComponents, getContext, getLocation } from
|
|||||||
const noopData = () => { return {} }
|
const noopData = () => { return {} }
|
||||||
const noopFetch = () => {}
|
const noopFetch = () => {}
|
||||||
|
|
||||||
function loadAsyncComponents (to, from, next) {
|
function loadAsyncComponents (to, ___, next) {
|
||||||
const resolveComponents = flatMapComponents(to, (Component, _, match, key) => {
|
const resolveComponents = flatMapComponents(to, (Component, _, match, key) => {
|
||||||
if (typeof Component === 'function' && !Component.options) {
|
if (typeof Component === 'function' && !Component.options) {
|
||||||
return new Promise(function (resolve, reject) {
|
return new Promise(function (resolve, reject) {
|
||||||
@ -32,7 +32,7 @@ function loadAsyncComponents (to, from, next) {
|
|||||||
})
|
})
|
||||||
}
|
}
|
||||||
|
|
||||||
function render (to, from, next) {
|
function render (to, ___, next) {
|
||||||
let Components = getMatchedComponents(to)
|
let Components = getMatchedComponents(to)
|
||||||
if (!Components.length) {
|
if (!Components.length) {
|
||||||
this.error({ statusCode: 404, message: 'This page could not be found.', url: to.path })
|
this.error({ statusCode: 404, message: 'This page could not be found.', url: to.path })
|
||||||
@ -162,7 +162,9 @@ const resolveComponents = flatMapComponents(router.match(path), (Component, _, m
|
|||||||
const _resolve = (Component) => {
|
const _resolve = (Component) => {
|
||||||
if (Component.data && typeof Component.data === 'function') {
|
if (Component.data && typeof Component.data === 'function') {
|
||||||
Component._data = Component.data
|
Component._data = Component.data
|
||||||
|
if (NUXT.serverRendered) {
|
||||||
Component.data = () => NUXT.data[index]
|
Component.data = () => NUXT.data[index]
|
||||||
|
}
|
||||||
if (Component._Ctor && Component._Ctor.options) {
|
if (Component._Ctor && Component._Ctor.options) {
|
||||||
Component._Ctor.options.data = Component.data
|
Component._Ctor.options.data = Component.data
|
||||||
}
|
}
|
||||||
@ -179,16 +181,34 @@ const resolveComponents = flatMapComponents(router.match(path), (Component, _, m
|
|||||||
Promise.all(resolveComponents)
|
Promise.all(resolveComponents)
|
||||||
.then((Components) => {
|
.then((Components) => {
|
||||||
const _app = new Vue(app)
|
const _app = new Vue(app)
|
||||||
|
const mountApp = () => _app.$mount('#__nuxt')
|
||||||
|
const onNuxtReady = window.onNuxtReady || function () {}
|
||||||
if (NUXT.error) _app.error(NUXT.error)
|
if (NUXT.error) _app.error(NUXT.error)
|
||||||
if (module.hot) hotReloadAPI(_app)
|
if (module.hot) hotReloadAPI(_app)
|
||||||
_app.$mount('#app')
|
|
||||||
// Add router hooks
|
// Add router hooks
|
||||||
router.beforeEach(loadAsyncComponents.bind(_app))
|
router.beforeEach(loadAsyncComponents.bind(_app))
|
||||||
router.beforeEach(render.bind(_app))
|
router.beforeEach(render.bind(_app))
|
||||||
|
if (NUXT.serverRendered) {
|
||||||
|
mountApp()
|
||||||
// Call window.onModulesLoaded for jsdom testing (https://github.com/tmpvar/jsdom#dealing-with-asynchronous-script-loading)
|
// Call window.onModulesLoaded for jsdom testing (https://github.com/tmpvar/jsdom#dealing-with-asynchronous-script-loading)
|
||||||
if (typeof window.onNuxtReady === 'function') {
|
onNuxtReady(_app)
|
||||||
window.onNuxtReady(_app)
|
return
|
||||||
}
|
}
|
||||||
|
render.call(_app, router.currentRoute, router.currentRoute, function (path) {
|
||||||
|
if (path) {
|
||||||
|
let mounted = false
|
||||||
|
router.afterEach(function () {
|
||||||
|
if (mounted) return
|
||||||
|
mounted = true
|
||||||
|
mountApp()
|
||||||
|
onNuxtReady(_app)
|
||||||
|
})
|
||||||
|
router.push(path)
|
||||||
|
return
|
||||||
|
}
|
||||||
|
mountApp()
|
||||||
|
onNuxtReady(_app)
|
||||||
|
})
|
||||||
})
|
})
|
||||||
.catch((err) => {
|
.catch((err) => {
|
||||||
console.error('[nuxt.js] Cannot load components', err)
|
console.error('[nuxt.js] Cannot load components', err)
|
||||||
|
@ -19,6 +19,10 @@ router.history.base = '<%= router.base %>'
|
|||||||
// Since data fetching is async, this function is expected to
|
// Since data fetching is async, this function is expected to
|
||||||
// return a Promise that resolves to the app instance.
|
// return a Promise that resolves to the app instance.
|
||||||
export default context => {
|
export default context => {
|
||||||
|
// Add store to the context
|
||||||
|
<%= (store ? 'context.store = store' : '') %>
|
||||||
|
// Nuxt object
|
||||||
|
context.nuxt = { data: [], error: null<%= (store ? ', state: null' : '') %>, serverRendered: true }
|
||||||
// create context.next for simulate next() of beforeEach() when wanted to redirect
|
// create context.next for simulate next() of beforeEach() when wanted to redirect
|
||||||
context.redirected = false
|
context.redirected = false
|
||||||
context.next = function (path) {
|
context.next = function (path) {
|
||||||
@ -29,6 +33,7 @@ export default context => {
|
|||||||
path.path = urlJoin('<%= router.base %>', path.path)
|
path.path = urlJoin('<%= router.base %>', path.path)
|
||||||
if (!context.res) {
|
if (!context.res) {
|
||||||
context.redirected = path.path
|
context.redirected = path.path
|
||||||
|
context.nuxt.serverRendered = false
|
||||||
return
|
return
|
||||||
}
|
}
|
||||||
context.res.writeHead(302, {
|
context.res.writeHead(302, {
|
||||||
@ -42,11 +47,6 @@ export default context => {
|
|||||||
context.route = router.currentRoute
|
context.route = router.currentRoute
|
||||||
// Add meta infos
|
// Add meta infos
|
||||||
context.meta = _app.$meta()
|
context.meta = _app.$meta()
|
||||||
// Add store to the context
|
|
||||||
<%= (store ? 'context.store = store' : '') %>
|
|
||||||
|
|
||||||
// Nuxt object
|
|
||||||
context.nuxt = { data: [], error: null<%= (store ? ', state: null' : '') %> }
|
|
||||||
|
|
||||||
<%= (isDev ? 'const s = isDev && Date.now()' : '') %>
|
<%= (isDev ? 'const s = isDev && Date.now()' : '') %>
|
||||||
// Call data & fecth hooks on components matched by the route.
|
// Call data & fecth hooks on components matched by the route.
|
||||||
|
@ -137,15 +137,17 @@ class Nuxt {
|
|||||||
// Call rendertoSting from the bundleRenderer and generate the HTML (will update the context as well)
|
// Call rendertoSting from the bundleRenderer and generate the HTML (will update the context as well)
|
||||||
const self = this
|
const self = this
|
||||||
return co(function * () {
|
return co(function * () {
|
||||||
const app = yield self.renderToString(context)
|
let app = yield self.renderToString(context)
|
||||||
if (context.nuxt && context.nuxt.error instanceof Error) {
|
if (context.nuxt && context.nuxt.error instanceof Error) {
|
||||||
context.nuxt.error = { statusCode: 500, message: context.nuxt.error.message }
|
context.nuxt.error = { statusCode: 500, message: context.nuxt.error.message }
|
||||||
}
|
}
|
||||||
|
if (context.redirected) {
|
||||||
|
app = '<div id="__nuxt"></div>'
|
||||||
|
}
|
||||||
const html = self.appTemplate({
|
const html = self.appTemplate({
|
||||||
dev: self.dev, // Use to add the extracted CSS <link> in production
|
dev: self.dev, // Use to add the extracted CSS <link> in production
|
||||||
baseUrl: (self.options.router.base !== '/' ? self.options.router.base : null),
|
baseUrl: self.options.router.base,
|
||||||
APP: app,
|
APP: app,
|
||||||
redirected: context.redirected,
|
|
||||||
context: context,
|
context: context,
|
||||||
files: {
|
files: {
|
||||||
css: urlJoin(self.options.router.base, '/_nuxt/', self.options.build.filenames.css),
|
css: urlJoin(self.options.router.base, '/_nuxt/', self.options.build.filenames.css),
|
||||||
|
@ -8,21 +8,13 @@
|
|||||||
<html>
|
<html>
|
||||||
<head>
|
<head>
|
||||||
${title.toString()}
|
${title.toString()}
|
||||||
<% if (baseUrl) { %><base href="<%= baseUrl %>"><% } %>
|
<base href="<%= baseUrl %>">
|
||||||
<% if (!dev) { %><link rel="stylesheet" href="<%= files.css %>"><% } %>
|
<% if (!dev) { %><link rel="stylesheet" href="<%= files.css %>"><% } %>
|
||||||
<% if (redirected) { %>
|
|
||||||
<meta http-equiv="refresh" content="0; url=<%= redirected %>" />
|
|
||||||
<script type="text/javascript">
|
|
||||||
window.location.href = '<%= redirected %>'
|
|
||||||
</script>
|
|
||||||
<% } %>
|
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<% if (!redirected) { %>
|
|
||||||
<%= APP %>
|
<%= APP %>
|
||||||
<script type="text/javascript" defer>window.__NUXT__=<%= serialize(context.nuxt) %></script>
|
<script type="text/javascript" defer>window.__NUXT__=<%= serialize(context.nuxt) %></script>
|
||||||
<script src="<%= files.vendor %>" defer></script>
|
<script src="<%= files.vendor %>" defer></script>
|
||||||
<script src="<%= files.app %>" defer></script>
|
<script src="<%= files.app %>" defer></script>
|
||||||
<% } %>
|
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
@ -1,6 +1,6 @@
|
|||||||
{
|
{
|
||||||
"name": "nuxt",
|
"name": "nuxt",
|
||||||
"version": "0.3.6",
|
"version": "0.3.7",
|
||||||
"description": "A minimalistic framework for server-rendered Vue.js applications (inspired by Next.js)",
|
"description": "A minimalistic framework for server-rendered Vue.js applications (inspired by Next.js)",
|
||||||
"main": "index.js",
|
"main": "index.js",
|
||||||
"license": "MIT",
|
"license": "MIT",
|
||||||
|
Loading…
Reference in New Issue
Block a user