vue2.0 路由router

// 1. 安装
	npm install --save vue-router
// 2. 新建 router 文件, 并在 index.js 中导入
	import Vue from 'vue'
	import Router from 'vue-router'
	Vue.use(Router)
	
	export default new Router({
		mode: 'history', // 访问路径不带#号 (有两种模式 hash模式 与 history模式)
		base: '/page/aa', // 配置单页应用的基路径 (页面这样访问 http://localhost:8080/page/aa/ 和 http://localhost:8080/ 访问的效果是一样的。)
		linkActiveClass: 'mylinkActiveClass', // 修改路由激活时添加的类名, 默认类名router-link-active
		routes: [{
			path: '/',
      		name: 'HelloWorld',
	      	component: () => import('@/components/HelloWorld'),
	      	redirect: 'parent', // 路由重定向
		    children: [{  // 子路由
		      path: '/parent',
		      name: 'Parent',
		      component: () => import('@/components/parent')
		    }, {
		      path: '/son',
		      name: 'Son',
		      component: () => import('@/components/son')
		    }]
		}]
	})
// 3.在 main.js 中注路由
	import router from './router'

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

// 4. 显示路由
	<router-view></router-view>
// 5. router-link
	<router-link> 比起写死的 <a href="..."> 会好一些，理由如下：
  无论是 HTML5 history 模式还是 hash 模式，它的表现行为一致，所以，当你要切换路由模式，或者在 IE9 降级使用 hash 模式，无须作任何变动。
  在 HTML5 history 模式下，router-link 会守卫点击事件，让浏览器不再重新加载页面。
  当你在 HTML5 history 模式下使用 base 选项之后，所有的 to 属性都不需要写（基路径）了
// 6. 重定向 redirect
	{
	    path:"/",
	    redirect:"/index"
  	}
// 7. 路由嵌套 chidren (显示的位置：父级在哪里，显示的位置就在那里)
// 8. 路由传递参数
	8.1 配置路由参数
		{  // 子路由
	     path: "/parent/:id/:count",
	     name: 'Parent',
	     component: () => import('@/components/parent')
	   }
	8.2 配置路由跳转路径信息
		<router-link  :to="{ name:'Parent',params:{id:'100',count:20} }">Parent组件</router-link>
	8.3 读取路由信息
		{{ $route.params.id }}-{{ $route.params.count }}
// 9. 路由高亮
	使用 vue-router 时会在路由上自动生成一个 router-link-active 类名, 可以通过该类名修改路由跳转时导航背景色
	通过 linkActiveClass 修改高亮类名
// 10. 路由模式
	（1） mode: "hash" 默认模式 带 # 号
	（2） mode: "history" 不带 # 号