Skip to content

N
node-sample
Commit 88be9dd8 authored by Evan You's avatar Evan You
Browse files
Options

use new features to update title

parent 19df1dcc
Hide whitespace changes
Inline Side-by-side
Showing with 41 additions and 16 deletions
server.js
View file @ 88be9dd8
...@@ -28,7 +28,8 @@ function createRenderer (bundle, options) { ...@@ -28,7 +28,8 @@ function createRenderer (bundle, options) {
}), }),
// this is only needed when vue-server-renderer is npm-linked // this is only needed when vue-server-renderer is npm-linked
basedir: resolve('./dist'), basedir: resolve('./dist'),
directMode: true // recommended for performance
runInNewContext: false
})) }))
} }
......
src/index.template.html
View file @ 88be9dd8
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en"> <html lang="en">
<head> <head>
<title>{{ title || 'Vue HN 2.0' }}</title>
<meta charset="utf-8"> <meta charset="utf-8">
<title>Vue HN 2.0</title>
<meta name="mobile-web-app-capable" content="yes"> <meta name="mobile-web-app-capable" content="yes">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no, minimal-ui"> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no, minimal-ui">
<link rel="shortcut icon" sizes="48x48" href="/public/logo-48.png"> <link rel="shortcut icon" sizes="48x48" href="/public/logo-48.png">
......
src/util/set-title.js 0 → 100644
View file @ 88be9dd8
export function setTitle (title, context) {
title = `Vue HN 2.0 | ${title}`
if (context) {
// server
context.title = title
} else {
// client
document.title = title
}
}
src/views/CreateListView.js
View file @ 88be9dd8
import ItemList from '../components/ItemList.vue' import ItemList from './ItemList.vue'
// This is a factory function for dynamically creating root-level list views, // This is a factory function for dynamically creating root-level list views,
// since they share most of the logic except for the type of items to display. // since they share most of the logic except for the type of items to display.
......
src/components/ItemList.vue → src/views/ItemList.vue
View file @ 88be9dd8
...@@ -20,9 +20,12 @@ ...@@ -20,9 +20,12 @@
</template> </template>
<script> <script>
import Spinner from './Spinner.vue'
import Item from './Item.vue'
import { watchList } from '../api' import { watchList } from '../api'
import { setTitle } from '../util/set-title'
import Item from '../components/Item.vue'
import Spinner from '../components/Spinner.vue'
const camelize = str => str.charAt(0).toUpperCase() + str.slice(1)
export default { export default {
name: 'item-list', name: 'item-list',
...@@ -59,7 +62,12 @@ export default { ...@@ -59,7 +62,12 @@ export default {
} }
}, },
serverRendered (context) {
setTitle(camelize(this.type), context)
},
beforeMount () { beforeMount () {
setTitle(camelize(this.type))
if (this.$root._isMounted) { if (this.$root._isMounted) {
this.loadItems(this.page) this.loadItems(this.page)
} }
......
src/views/ItemView.vue
View file @ 88be9dd8
...@@ -28,6 +28,7 @@ ...@@ -28,6 +28,7 @@
</template> </template>
<script> <script>
import { setTitle } from '../util/set-title'
import Spinner from '../components/Spinner.vue' import Spinner from '../components/Spinner.vue'
import Comment from '../components/Comment.vue' import Comment from '../components/Comment.vue'
...@@ -48,13 +49,6 @@ function fetchComments (store, item) { ...@@ -48,13 +49,6 @@ function fetchComments (store, item) {
} }
} }
function fetchItemAndComments (store) {
return fetchItem(store).then(() => {
const { items, route } = store.state
return fetchComments(store, items[route.params.id])
})
}
export default { export default {
name: 'item-view', name: 'item-view',
components: { Spinner, Comment }, components: { Spinner, Comment },
...@@ -70,10 +64,16 @@ export default { ...@@ -70,10 +64,16 @@ export default {
}, },
// on the server, only fetch the item itself // on the server, only fetch the item itself
preFetch: fetchItem, preFetch: fetchItem,
// on the client, fetch everything serverRendered (context) {
setTitle(this.item.title, context)
},
// on the client, fetch item + comments
beforeMount () { beforeMount () {
fetchItemAndComments(this.$store).then(() => { fetchItem(this.$store).then(() => {
this.loading = false setTitle(this.item.title)
fetchComments(this.$store, this.item).then(() => {
this.loading = false
})
}) })
} }
} }
......
src/views/UserView.vue
View file @ 88be9dd8
...@@ -17,6 +17,7 @@ ...@@ -17,6 +17,7 @@
</template> </template>
<script> <script>
import { setTitle } from '../util/set-title'
import Spinner from '../components/Spinner.vue' import Spinner from '../components/Spinner.vue'
function fetchUser (store) { function fetchUser (store) {
...@@ -34,8 +35,13 @@ export default { ...@@ -34,8 +35,13 @@ export default {
} }
}, },
preFetch: fetchUser, preFetch: fetchUser,
serverRendered (context) {
setTitle(this.user.id, context)
},
beforeMount () { beforeMount () {
fetchUser(this.$store) fetchUser(this.$store).then(() => {
setTitle(this.user.id)
})
} }
} }
</script> </script>
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment