vue-router2 7-pasing props to route components

by Luke

HTML

<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>

<!--template id='hello'>
  <div>
    <h2 class="hello">Hello {{name}}</h2>
  </div>
</template-->

<div id="app">
</div>

JavaScript

// import Vue from 'vue'
// import VueRouter from 'vue-router'
// import Hello from './Hello.vue'

// Vue.use(VueRouter)

var Hello = {
  props: {
    name: {
      type: String,
      default: 'Vue!'
    }
  },
  template: `
  	<div>
    	<h2 class="hello">Hello {{name}}</h2>
  	</div>
  `
  //'#hello'
}

function dynamicPropsFn (route) {
  const now = new Date()
  return {
  	// name: 12
    name: (now.getFullYear() + parseInt(route.params.years)) + '!'
  }
}

const router = new VueRouter({
  // mode: 'history',
  // base: __dirname,
  routes: [
    { path: '/', component: Hello }, // No props, no nothing
    { path: '/hello/:name', component: Hello, props: true }, // Pass route.params to props
    { path: '/static', component: Hello, props: { name: 'world' }}, // static values
    { path: '/dynamic/:years', component: Hello, props: dynamicPropsFn } // custom logic for mapping between route and props
  ]
})

new Vue({
  router,
  template: `
    <div id="app">
      <h1>Route props</h1>
      <ul>
        <li><router-link to="/">/</router-link></li>
        <li><router-link to="/hello/you">/hello/you</router-link></li>
        <li><router-link to="/static">/static</router-link></li>
        <li><router-link to="/dynamic/1">/dynamic/1</router-link></li>
      </ul>
      <router-view class="view"></router-view>
    </div>
  `
}).$mount('#app')