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原型中