Permalink
Browse files

make baisc vue-router work

  • Loading branch information...
njleonzhang committed Jul 25, 2018
1 parent 839f40a commit 14e4f07fa89015d2e416419f8ea4ccde03b4663b
Showing with 312 additions and 67 deletions.
  1. +117 −21 dist/client-bundle.js
  2. +117 −21 dist/server-bundle.js
  3. +2 −1 package.json
  4. +12 −4 server.js
  5. +5 −17 src/App.vue
  6. +6 −1 src/app.js
  7. +1 −1 src/entry-client.js
  8. +2 −1 src/entry-server.js
  9. +22 −0 src/router/index.js
  10. +23 −0 src/views/Home.vue
  11. +5 −0 src/views/Test.vue

Large diffs are not rendered by default.

Oops, something went wrong.

Large diffs are not rendered by default.

Oops, something went wrong.
@@ -20,6 +20,7 @@
"webpack-merge": "^4.1.3"
},
"dependencies": {
"vue": "^2.5.16"
"vue": "^2.5.16",
"vue-router": "^3.0.1"
}
}
@@ -2,7 +2,7 @@ const Vue = require('vue')
const express = require('express')
const server = express()
const createRenderer = require('vue-server-renderer').createRenderer
const app = require('./dist/server-bundle')
const createApp = require('./dist/server-bundle').default

const renderer = createRenderer({
template: require('fs').readFileSync('./index.template.html', 'utf-8'),
@@ -19,10 +19,18 @@ server.get('*', (req, res) => {
`
}

renderer.renderToString(app.default(), context, (err, html) => {
const app = createApp({
url: req.url
})

This comment has been minimized.

@njleonzhang

njleonzhang Jul 25, 2018

Author Owner

url传个 entry-server.js 文件里的工厂函数。

url is passed to app create function/factory in entry-server.js

renderer.renderToString(app, context, (err, html) => {
if (err) {
res.status(500).end('Internal Server Error')
return
if (err.code === 404) {
res.status(404).end('Page not found')
} else {
res.status(500).end('Internal Server Error')
}
return
}

res.send(html)
@@ -1,23 +1,11 @@
<template>
<div id='app'>
hello world
<div v-if='show'>show me</div>
<div>
<button @click='toggle'>toggle</button>
I am the navigation bar
<router-link to="/home">Go to home</router-link>
<router-link to="/test">Go to test</router-link>
</div>
<!-- router-view -->
<router-view></router-view>
</div>
</template>
<script>
export default {
data() {
return {
show: true
}
},
methods: {
toggle() {
this.show = !this.show
}
}
}
</script>
@@ -1,12 +1,17 @@
import Vue from 'vue'
import App from './App.vue'
import { createRouter } from './router/index'

// 导出一个工厂函数,用于创建新的
// 应用程序、router 和 store 实例
export function createApp () {
// create the router instance
const router = createRouter()

const app = new Vue({
// 根实例简单的渲染应用程序组件。
router,
render: h => h(App)
})
return { app }
return { app, router }
}
@@ -4,5 +4,5 @@ import { createApp } from './app'

const { app } = createApp()

// 这里假定 App.vue 模板中根元素具有 `id="app"`
// 这里假定 App.vue 模板中根元素具有 id="app"
app.$mount('#app')
@@ -1,6 +1,7 @@
import { createApp } from './app'

export default context => {
const { app } = createApp()
const { app, router } = createApp()
router.push(context.url)

This comment has been minimized.

@njleonzhang

njleonzhang Jul 25, 2018

Author Owner

url 来自于 server.js 里的 server.get callback 的第一个参数 req,即用户在浏览器里访问的路径。服务器端的这段代码,会让服务器端按这个路径来处理路由,并渲染出这个路径对应的 index.html

url is from req, the 1st parameter of callback of serve.get in server.js. which represents the path user accessed from the browser. This piece of code in server side handle the router and make the index.html fulfilled by content corresponding to the path.

return app
}
@@ -0,0 +1,22 @@
import Vue from 'vue'
import Router from 'vue-router'
import Home from '../views/Home.vue'
import Test from '../views/Test.vue'

Vue.use(Router)

export function createRouter() {
return new Router({
mode: 'history',
routes: [
{
path: '/home',
component: Home
},
{
path: '/test',
component: Test
},
]
})
}

This comment has been minimized.

@njleonzhang

njleonzhang Jul 25, 2018

Author Owner

vue-router 的路由描述文件. 和 non-ssr 不一样的地方就在于,ssr 版本工厂化了。

a vue router description js file. The difference to non-ssr version is that the router is created by a function/factory.

@@ -0,0 +1,23 @@
<template>
<div id='app'>
hello home
<div v-if='show'>show me</div>
<div>
<button @click='toggle'>toggle</button>
</div>
</div>
</template>
<script>
export default {
data() {
return {
show: true
}
},
methods: {
toggle() {
this.show = !this.show
}
}
}
</script>
@@ -0,0 +1,5 @@
<template>
<div>
I am test
</div>
</template>

0 comments on commit 14e4f07

Please sign in to comment.