vue-router和模块化开发

一、vue-router路由

    1、简介：
        使用vue开发单页面SPA(single page application) 当页面应用
        根据不同的url地址，显示不同的内容，但显示在同一个页面中，称之为当页面


        【参考】：https://router.vuejs.org/zh/

         bower info vue-router //查看版本

         cnpm install vue-router -S  //下载

    2、基本用法

        a)、页面布局
        b)、配置路由

    3、路由嵌套和参数传递

        传参的两种形式

        a.查询字符串：login?name=tom&pwd=123   取参：$route.query

        b.rest风格url：regist/alice/456

        路由中定义参数：register/:name/:pwd

        取参：$route.params

    4、路由实例的方法

        router.push()//添加路由，功能上与<route-link>相同

        router.replace()替换路由，不产生历史记录

    5、路由结合动画 animation.css

<transition enter-active-class="animated bounceInLeft" leave-active-class="animated bounceOutRight">
　　<!--显示路由内容-->
　　<router-view></router-view>
</transition>

 

二、模块化开发

1、vue-router 模块化开发

 cnpm install vue-router -S 

2、axios 模块化

 cnpm install axios -S 

使用axios的两种方式：

    方式1：在每个组件中引入axios
    方式2：在main.js 中全局引入axios并添加到vue原型中