main.js

vue init webpack //选择router

import router from './router'
new Vue({
  el: '#app',
  router,
  components: { App },
  template: '<App/>'
})

// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'
import router from './router'

Vue.config.productionTip = false

/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  components: { App },
  template: '<App/>'
})

router/index.js

import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'
import Contact from '@/components/Contact'
import Friend from '@/components/Friend'

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      name: 'HelloWorld',
      component: HelloWorld
    },
    {
      path: '/Contact/:id/:name',
      name: 'Contact',
      props : true,//是否接受参数
      component: Contact
    },
    {
      path: '/Friend',
      name: 'Friend',
      component: Friend
    }
  ]
})

Contact.vue

<template>
	<div>
		<h1>contact</h1>
		{{id}} {{name}}
	</div>
</template>

<script>
	export default {
		props : [
			'id',
			'name'
		]
	}
</script>

代码在github上，如果觉得有帮助请给我星星

源代码下载