1.路由使用实例

<transition name="fade">
	<keep-alive>
		<router-view name="viewA"></router-view>
	</keep-alive>
</transition>
<router-view name="viewB"></router-view>
<router-link :to="{path:'/hello',param:{color:'yellow'}}">to hello</router-link>  //路由传参
<router-link :to="{path:'/a',name:'a'}" tag="li">to a</router-link>
<router-link :to="{path:'/a/b'}">to b</router-link>

2.路由配置

import Vue from 'vue'
import Router from 'vue-router'
import Hello from '@/components/Hello'
import A from '@/components/A'
import B from '@/components/B'
Vue.use(Router)

export default new Router({
  mode:'history',
  routes: [
  	{
      path: '/',
      redirect:'/hello'
    },
    {
      path: '*',
      component: B,
    },
    {
      path: '/hello/:id/detail/:type',//路由参数
      name: 'Hello',
      component: {
      	viewA:Hello,
      	viewB:A
      }
    },
    {
      path: '/a',
      name: 'a',
      component: A,
      children:[//子路由
      	{
      		path:'b',
      		name:'B',
      		component:B
      	}
      ]
    }
  ]
})

//router.beforEach(function(){
//	router.push({path:'/b',component:B})
//})
//export default router

3.获取当前路由参数

<template>
	<div>
		{{hello}}
		<router-view name="viewA"></router-view>
		<button @click="getParams">获取参数</button>
		{{$route.params.id}}
		
	</div>
</template>

<script>
	export default {
		data () {
			return {
				hello: 'i am component a'
			}
		},
		methods:{
			getParams (){
				console.log(this.$route.params)
			}
		}
	}
</script>

<style>
</style>