• 最近有空还是继续在学习，而我要做的实例，就是将博客用Vuejs来实现了，之前有用过angurlarjs，这里面我说一下，Vuejs的路由想法，相比较于angurlar就简单易懂多了，下面先来做一下对比

angurlar

      phonecatApp.config(['$routeProvider',
      function($routeProvider) {
        $routeProvider.
          when('/phones', {
            templateUrl: 'partials/phone-list.html',
            controller: 'PhoneListCtrl'
          }).
          when('/phones/:phoneId', {
            templateUrl: 'partials/phone-detail.html',
            controller: 'PhoneDetailCtrl'
          }).
          otherwise({
            redirectTo: '/phones'
          });
      }]);

vue

        var router = new VueRouter();
        router.map({
            "/": {
                component: phoneList
            },
            "/phones": {
                component: phoneList
            },
            "/phones/:phoneId": {
                component: {
                    template: 'TBD: detail view for <span>{{$route   .params.phoneId}}</span>',
                }
            }
        });
        router.start(app, "#app");

相比较两种语法，是不是觉得Vue 的路由控制更加清爽呢，不用像angurlar那样理解于controller了

下面直接来讲一下我在Vue 中如果通过 vue-router来实现路由的吧

第一步：直接运行这样的代码，就可以看到 vue-router

    npm install vue-router --save

第二步： 语法引入，

    import Vue from "vue";
    import VueRouter from "vue-router";
    Vue.use(VueRouter);

第三步： 使用指令 v-link 进行导航

   <ul class="items">
        <li class="menu-items-type"><a v-link="{ path: 'about' }" title="关于Super xing"><i class="icon-group"></i></a></li>
        <li class="menu-items-tyoe"><a v-link="{ path: 'cat' }" title="文章分类"><i class="icon-book"></i></a></li>
        <li class="menu-items-type"><a v-link="{ path: 'guest' }" title="留言板"><i class="icon-comments"></i></a></li>
        <li class="menu-items-type"><a v-link="{ path: 'product' }" title="推荐"><i class="icon-move"></i></a></li>
        <li class="menu-items-type"><a href="#" title="订阅"><i class="icon-magic"></i></a></li>
      </ul>

第四步： 定义组件，完成路由配置

    var router = new VueRouter()
    router.map({
      '/home': {
        component: home
      },
      '/about': {
        component: about
      },
      '/cat': {
        component: cat
      },
      '/guest': {
        component: guest
      },
      '/product': {
        component: product
      }
    })
    router.redirect({     //表示找不到的链接跳转到home目录
      '*': '/home'
    })
    router.start(App, 'app')     //router 启动为 App,挂载到app标签

到这里，查不到大功告成了，很多网上的文档也是这么写的，但是我跑到了这里，程序没有跑通，随机翻阅了官方的文档，还缺了了一个路由的组件 在组件中添加 “< router-view>”,

    <div class="content">
      <router-view></router-view>
    </div>

• 在这里，我是这样添加的，因为我的需要是路由控制这个content 的转换。

• 到这里，关于整个 vue-router的简单实例已经完成了。看着简单的功能，我在这里提醒几个误区，无则加冕。

vue文件中很注意空格和tab的缩进，我的tab回报错，只能通过2空格来防止这个错误，我用的是sublime编辑器，不知道是不是编辑器的原因，后期继续验证

// 注释， 这样的注释，虽然在编辑器上看来是没有错误的，但是ewbpack自动保存的时候， 回出现报错现象，需要 /* ＊/ 来实现注释

组件的引用，不能将组件命名为html中的标签名，比如 header ，footer

http://router.vuejs.org/zh-cn/route.html 官方中文文档