vue-router的详解

为什么会使用Vue-router？

因为现在大多采用单页面应用，Vue中会使用官方提供的Vue-router插件来使用单页面，原理就是通过检测地址栏变化后将对应的路由组件进行切换（卸载和安装）

路由实现的步骤：

1.cnpm install vue-router -S

2. 引入vue-router，如果是在脚手架中，引入VueRouter之后，需要通过 Vue.use来注册

    import Vue from 'vue'
    import Router from 'vue-router'
    Vue.use(Router)  //内部调用了Router.install(Vue)

4. 创建router路由器

     let router = new Router({
      routes:[
        {path:"/home",component:Home}
      ]
    })

5. 创建路由表并配置在路由器中

 var routes = [
        {path,component}//path为路径，component为路径对应的路由组件
    ]

    let router = new Router({
        routes
    })
    export default router

6. 在根实例里注入router,目的是为了让所有的组件里都能通过this.$router、this.$route来使用路由的相关功能api

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

7. 利用router-view来指定路由切换的位置
8. 使用router-link来创建切换的工具，会渲染成a标签，添加to属性来设置要更改的path信息，且会根据当前路由的变化为a标签添加对应的router-link-active/router-link-exact-active（完全匹配成功）类名

	<router-link to="main">main</router-link>
	<router-link to="news">news</router-link>
	
	.router-link-active{
	    color:red;
	}