一，vue-router基本认识

1，什么是vue-router
适用于vue的路由技术，
路由：当我们访问某个路径的时候，路由会将我们引导至响应的组件（一个小的HTML结构）。
路由器：当我们访问www.jd.com的时候，是经过多个路由器转发之后，
将我们的请求送达到北京的某个服务器去，并获取到资源之后，拿回来展示在我们的浏览器上


音译，意译


2，为什么要使用vue-router
大型SPA（单页面应用）项目中，会出现很多组件， 并需要在不同情况下，针对不同的需求从一个组件切换到另外一个组件的时候， 使用vue-router会极大方便我们控制整个切换流程 。


3，如何使用vue-router？

二，vue-router使用流程

1,引入vue.js与vue-router.js核心文件 。

  1. <script type="text/javascript" src="js/vue.js" ></script>
  2. <script type="text/javascript" src="js/vue-router.js" ></script>

2,给定若干导航菜单,用以触发路由 。
通过 

  1. <ul class="nav">
  2.     <li>
  3.         <router-link to="/one">首页</router-link>
  4.     </li>
  5.     <li>
  6.         <router-link to="/two">产品</router-link>
  7.     </li>
  8.     <li>
  9.         <router-link to="/three">联系</router-link>
  10.     </li>
  11. </ul>

3,初始化一个路由对象var router = new VueRouter(),并对路由对象做指定配置。 

  1. var router = new VueRouter({
  2.     routes:[
  3.         {
  4.             path:'/one',
  5.             component:{
  6.                 template:'<div>我是首页one组件</div>'
  7.             }
  8.         },
  9.         {
  10.             path:'/two',
  11.             component:{
  12.                 template:'<div>我是产品two组件</div>'
  13.             }
  14.         },
  15.         {
  16.             path:'/three',
  17.             component:{
  18.                 template:'<div>我是联系three组件</div>'
  19.             }
  20.         }
  21.     ]
  22. })

4,将router对象注入到Vue对象下 。

  1. new Vue({
  2.     el:"#app",
  3.     router:router
  4. })

5,使用 指定渲染路由对应组件的位置。

  1. <div id="app">
  2.     <ul class="nav">
  3.         <li>
  4.             <router-link to="/one">首页</router-link>
  5.         </li>
  6.         <li>
  7.             <router-link to="/two">产品</router-link>
  8.         </li>
  9.         <li>
  10.             <router-link to="/three">联系</router-link>
  11.         </li>
  12.     </ul>
  13.     <router-view></router-view>
  14. </div>