初探vue-router

学习vue已经有一周的时间，我已经能够完成一些基本的页面和功能，对MVVM也有了一点见解。本着“实践是检验真理的唯一标准”，我打算做一个小项目来巩固巩固知识，实际应用一下所学到的东西。

想法是做一个有完整功能的SPA，通过外部API获得数据，并实现一些页面转换，增删，筛选的功能，在这之前，我首先要了解一下vue-router。

vue-router是针对SPA页面跳转的一个路由插件，与vue深度集成。什么是路由呢，在传统的页面中，页面通过超链接进行页面的切换和跳转，这带来往往的就是页面的重加载，而很多单页面希望不刷新整个页面，他们只需要局部刷新，或者说：他们需要某些组件的切换。vue-router通过建立组件与路径的映射，把两者关联起来，当页面路径改变的时候，页面不会重新加载，而是把该路径的组件替换进来，从而实现局部刷新。

例如我有一个A组件item-a和一个B组件item-b，他们是主页面index.html上面的内容，可相互切换，把他们映射到两个路径：index.html#item-a和index.html#/item-b上。vue-router会解释#号后面的路径，然后把该路径的组件加载进来。

官方文档介绍了一下基本的使用方式，我很快就实现了切换的效果（因为没有研究过ES6，所以没用到import）：

//定义路由组件
const Login={template:'<div><p>this is the login page</p><router-link to="/main"></router-link></div>'};
const Main={template:'<div>this is the main page</div>'};
//定义路由
const routes=[
    {path:'/login',component:Login},
    {path:'/main',component:Main}
];
//创建router实例
const router=new VueRouter({
    routes:routes
});
const app=new Vue({
    template:'<div><router-link to="/login"></router-link><router-view></router-view></div>',
    router
}).$mount('#app');

通过ES6的import可以把组件通过模块的方式打包进来，这就避免了在js文件中定义组件的html模板，是十分有用的方法，ES6我现在也在学习中，下一篇文章将会稍微研究研究。