2019/08/12

1. $router 和 route

• router是VueRouter的一個對象，通過Vue.use(VueRouter)和VueRouter構(gòu)造函數(shù)得到一個router的實例對象。
• route是一個跳轉(zhuǎn)的路由對象，每一個路由都會有一個route對象，是一個局部的對象，可以獲取對應(yīng)的name,path,params,query等。

$router.push({path:'home'});   //本質(zhì)是向history棧中添加一個路由，在我們看來是 切換路由，但本質(zhì)是在添加一個history記錄

$router.replace({path:'home'});  //替換路由，沒有歷史記錄

this.$router.push({path:`/user/${userId}`})   //路由跳轉(zhuǎn)
this.$route.params.userId   //接收參數(shù)

this.$router.push({name:'Login',params:{id:'leelei'}})
this.$router.push({path:'/login',query:{id:'leelei'})
this.$route.query.***   //query傳參是針對path的，params傳參是針對name的

注意
1.使用query傳參的話，會在瀏覽器的url欄看到傳的參數(shù)類似于get請求，使用params傳參的話則不會，類似于post請求。
2.如果提供了path，params將會被忽略（即如果要使用params傳參，則一定要使用name），但是query不屬于這種情況。如果使用完整路徑和query傳參，刷新頁面時不會造成路由傳參的參數(shù)丟失。
3.router.push和router.replace的區(qū)別是：replace不會向 history 添加新記錄，而是替換掉當(dāng)前的 history 記錄，即使用replace跳轉(zhuǎn)到的網(wǎng)頁‘后退’按鈕不能點擊。

2. 兩個圖片的疊加

<div style="position: relative"> 
    <div style="position: absolute;">
        <img v-show="wechat"  src="0.png" alt="">
    </div>
    <img" src="1.png" @click="changeMethod(0)">
</div>
<div style="position: relative;">
    <div style="position: absolute;">
        <img v-show="alipay" src="3.png">
    </div>
    <img src="4.png" @click="changeMethod(1)">
</div>

示例