From ebb101d8e78f839fb7fdd80068082a8623006086 Mon Sep 17 00:00:00 2001 From: Declan de Wet Date: Mon, 7 Nov 2016 06:58:57 +0200 Subject: [PATCH] add vue-router example with render function --- examples/index.html | 1 + examples/vue-router/app.js | 53 ++++++++++++++++++++++++++++++++++ examples/vue-router/index.html | 5 ++++ package.json | 1 + yarn.lock | 4 +++ 5 files changed, 64 insertions(+) create mode 100644 examples/vue-router/app.js create mode 100644 examples/vue-router/index.html diff --git a/examples/index.html b/examples/index.html index 9e6aa69..2e47851 100644 --- a/examples/index.html +++ b/examples/index.html @@ -9,6 +9,7 @@ diff --git a/examples/vue-router/app.js b/examples/vue-router/app.js new file mode 100644 index 0000000..56a43ea --- /dev/null +++ b/examples/vue-router/app.js @@ -0,0 +1,53 @@ +import Vue from 'vue' +import VueMeta from 'vue-meta' +import Router from 'vue-router' + +Vue.use(Router) +Vue.use(VueMeta) + +const ChildComponent = () => ({ + name: `child-component`, + props: ['page'], + template: `

You're looking at the {{ page }} page

`, + metaInfo: { + title () { + return this.page + } + } +}) + +function view (page) { + return { + name: `section-${page}`, + render (h) { + return h(ChildComponent(), { + props: { page } + }) + } + } +} + +const router = new Router({ + mode: 'history', + base: '/vue-router', + routes: [ + { path: '/', component: view('home') }, + { path: '/about', component: view('about') } + ] +}) + +const App = { + template: ` +
+

vue-router

+ Home + About + +

Inspect Element to see the meta info

+
+ ` +} + +const app = new Vue(Object.assign(App, { router })) + +app.$mount('#app') diff --git a/examples/vue-router/index.html b/examples/vue-router/index.html new file mode 100644 index 0000000..cf41105 --- /dev/null +++ b/examples/vue-router/index.html @@ -0,0 +1,5 @@ + + +← Examples index +
+ diff --git a/package.json b/package.json index 031df2e..4ecb9c2 100644 --- a/package.json +++ b/package.json @@ -46,6 +46,7 @@ "update-section": "^0.3.3", "vue": "^2.0.3", "vue-loader": "^9.7.0", + "vue-router": "^2.0.1", "webpack": "beta", "webpack-dev-server": "beta" }, diff --git a/yarn.lock b/yarn.lock index ba6e65d..0c8e963 100644 --- a/yarn.lock +++ b/yarn.lock @@ -5365,6 +5365,10 @@ vue-loader@^9.7.0: vue-template-compiler "^2.0.0-rc.3" vue-template-es2015-compiler "^1.0.0" +vue-router: + version "2.0.1" + resolved "https://registry.yarnpkg.com/vue-router/-/vue-router-2.0.1.tgz#88b83cdc9497bad5b20b579e847a7e7240e221dd" + vue-style-loader@^1.0.0: version "1.0.0" resolved "https://registry.yarnpkg.com/vue-style-loader/-/vue-style-loader-1.0.0.tgz#abeb7bd0f46313083741244d3079d4f14449e049"