先用个简单的例子理解一下 Vuejs 的 router，也就是路由 .. 打开特定的地址，显示对应的组件 .. 这个就是 Vuejs 的路由要做的基本的事情 ..

这个 index.js 是应用的脚本 .. 在这里，我们先去定义两个简单的组件 .. const Home .. 一个对象 .. 里面用一个 template .. 模板的内容是一个 h2 包装的文字 .. 首页 ..

再定义一个 Event .. 一个 template 属性，对应的值是 h2 包装的 活动

路由

下面再去定义一些路由 .. 名字可以是 routes .. 它是一个数组 .. 数组里的每个项目就是一个路由项目 .. 里面先添加一个 path ，设置一下路由的地址 .. 一个 / 表示根 .. 再添加一个 component .. 指定一下跟这个地址对应的组件 .. 这里我们用一下上面定义的 Home 这个组件 ..

再添加一个路由项目 .. path 的值是 /events .. component ，对应的组件是 Event

路由实例

有了路由，再去创建一个路由实例 .. const router ，等于 .. new VueRouter .. 实例化的时候给它一个对象 .. 添加一个 routes .. 设置一下路由 .. 这里就是上面定义的 routes .. 这行代码有个简单的写法，可以直接用一个 routes ..

在新建 Vue 实例的时候，在它的选项里面，可以再添加一个 router 选项 ，设置一下路由实例 .. 这里也可以简单的用一个 router ..

视图

再去添加两个路由链接 .. 打开 index.html .. 用一下 Vue 提供的 router-link 这个组件 .. 组件包装的就是链接上的文字 .. 这个是首页 .. 在 router-link 组件上面，再用一个 to ，去设置一下链接地址 .. 首页的地址是 / ..

再添加一个 router-link .. 链接的文字是 活动 .. 链接的地址是 /events ..

这里还需要一个显示路由内容用的东西 .. 要用一下 router-view 这个组件 ..

预览
回到浏览器 .. 去预览一下 .. 打开浏览器的开发者工具 .. Elements ..

现在打开的地址是 / ，所有显示的组件就是 Home .. 页面上会显示一个用 h2 标签包装的 首页 ..

再打开 活动 .. 地址现在变成了 events .. 页面上的 router-view 组件显示的就是 Event 组件的内容 .. 也就是用 h2 标签包装的 活动 ..