add vue-router example with render function

2026-06-20 21:00:33 +03:00 · 2016-11-07 06:58:57 +02:00
parent 2f6c27b750
commit ebb101d8e7
5 changed files with 64 additions and 0 deletions
@@ -9,6 +9,7 @@
  <ul>
    <li><a href="basic">Basic</a></li>
    <li><a href="basic-render">Basic Render</a></li>
+    <li><a href="vue-router">Usage with vue-router</a></li>
  </ul>
 </body>
 </html>
@@ -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: `<h3>You're looking at the <strong>{{ page }}</strong> page</h3>`,
+  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: `
+    <div id="app">
+      <h1>vue-router</h1>
+      <router-link to="/">Home</router-link>
+      <router-link to="/about">About</router-link>
+      <router-view></router-view>
+      <p>Inspect Element to see the meta info</p>
+    </div>
+  `
+}
+
+const app = new Vue(Object.assign(App, { router }))
+
+app.$mount('#app')
@@ -0,0 +1,5 @@
+<!DOCTYPE html>
+<link rel="stylesheet" href="/global.css">
+<a href="/">&larr; Examples index</a>
+<div id="app"></div>
+<script src="/__build__/vue-router.js"></script>