SOURCE

const Hello = { 
	template: '<div>hello {{name}}</div>',
  props: {
    name: {
      type: String,
      default: 'Vue!'
    }
  }    
}

function dynamicPropsFn (route) {
  const now = new Date()
  return {
    name: (now.getFullYear() + parseInt(route.params.years)) + '!'
  }
}
const router = new VueRouter({
  mode: 'history',
  routes: [
    { path: '/', component: Hello }, 
    { path: '/hello/:name', component: Hello, props: true }, //通过动态路径参数传递props
    { path: '/static', component: Hello, props: { name: 'world' }}, // 传入静态字面量
    { path: '/dynamic/:years', component: Hello, props: dynamicPropsFn } // 使用方法来动态返回props内容
  ]
})

new Vue({
  router
}).$mount('#app')

<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.10/vue.min.js"></script><script src="https://cdn.bootcdn.net/ajax/libs/vue-router/3.1.6/vue-router.js"></script>


<div id="app">
  <h1>滚动行为</h1>
  <ul>
    <li><router-link to="/">/</router-link></li>
    <li><router-link to="/foo">/foo</router-link></li>
    <li><router-link to="/bar">/bar</router-link></li>
    <li><router-link to="/bar#anchor">/bar#anchor</router-link></li>
  </ul>
  <router-view class="view"></router-view>
</div>