Vue Router 学习笔记

我直接在官方文档上学习 Vue Router，水平有限，看得比较懵逼，感觉这份文档真不友好，一上来就是客户端并不普及的ES6语法，键值对还用上缩写，不是写给想要学习的人看的，而是写给什么都会的大神看的，这里吐槽下。

自己慢慢琢磨，琢磨出来的做下笔记，可怜我从第一章开始就卡了一下……

1. 开始
   把官方的例子改成通俗易懂的样子：
   HTML

<div id="app">
  <h1>Hello App!</h1>
  <p>
    <!-- 使用 router-link 组件来导航，通过传入 `to` 属性指定链接 -->
    <!-- <router-link> 默认会被渲染成一个 `<a>` 标签 -->
    <router-link to="/page1">Go to Page 1</router-link>
    <router-link to="/page2">Go to Page 2</router-link>
  </p>
  <!-- 路由匹配到的组件将渲染在这里 -->
  <router-view></router-view>
</div>

JavaScript

//1、建立模板，这些内容最终显示在 <router-view> 标签处
var page1 = { template: '<h3>page1</h3>' },
       page2 = { template: '<h3>page2</h3>' };  
//
//2、建立路由表，定义路径与组件的关系
var routerPage = [ { path: '/page1', component: page1 },
                      { path: '/page2', component: page2 } ];
//
//3、创建 router 实例
var routerTest = new VueRouter( { routes: routerPage } );
//
//4、在Vue实例中添加 router 配置参数注入路由。也可以通过 $mount('#app')挂载。
var app = new Vue({
    el: '#app',
    router: routerTest
});
// 完成最基础的配置。