`<template>
 <div id="app">
 <transition :name="'fade-'+(direction==='forward'?'last':'next')">
 <router-view></router-view>
 </transition>
 </div>
</template>
<script>
export default {
 name: "app",
 data: () => {
 return {
 direction: ""
 };
 },
 watch: {
 $route(to, from) {
 let toName = to.name;
 const toIndex = to.meta.index;
 const fromIndex = from.meta.index;
 this.direction = toIndex < fromIndex ? "forward" : "";
 }
 }
}
</script>
<style scoped>
.fade-last-enter-active {
 animation: bounce-in 0.6s;
}
.fade-next-enter-active {
 animation: bounce-out 0.6s;
}
@keyframes bounce-in {
 0% {
 transform: translateX(-100%);
 }
 100% {
 transform: translateX(0rem);
 }
}
@keyframes bounce-out {
 0% {
 transform: translateX(100%);
 }
 100% {
 transform: translateX(0rem);
 }
}
</style>

<router-link :to="{name:'home', query: {id:1}}">

this.$router.push({name:'home',query: {id:'1'}})
this.$router.push({path:'/home',query: {id:'1'}})

this.$router.push({name:'home',params: {id:'1'}})

setTimeout(() => { //這里用定時(shí)器是因?yàn)轫撁嬉患虞d出來我就展示的是圖片 為了防止圖片還未生成 給點(diǎn)時(shí)間
 html2canvas(document.querySelector("#top"), {
 useCORS: true, //是否嘗試使用CORS從服務(wù)器加載圖像 
 logging: false,//刪除打印的日志 
 allowTaint: false //這個(gè)和第一個(gè)很像 但是不能同時(shí)使用 同時(shí)使用toDataURL會失效
 }).then(canvas => {
 let imageSrc = canvas.toDataURL("image/jpg"); // 轉(zhuǎn)行img的路徑 
 this.imageSrc = imageSrc; //定義一個(gè)動態(tài)的 ：src 現(xiàn)在是賦值給src 圖片就會展現(xiàn)
 this.$refs.top.style.display = "none"; // 讓頁面上其他元素消失 只顯示圖片
 });
 }, 1000);

this.code = location.href; //首先獲取code 
if (this.code.lastIndexOf("code=") != -1) {
 (this.code = this.code.substring(
 this.code.lastIndexOf("code=") + 5,
 this.code.lastIndexOf("&state")
 )),
 this.$axios
 .get("*******8?code=".concat(this.code))
 .then(function(t) { //獲取后端傳會來的參數(shù) 
 localStorage.setItem("unionid", t.data.unionid);
 localStorage.setItem("openid", t.data.openid);
 localStorage.setItem("nickname", t.data.nickname);
 localStorage.setItem("headimgurl", t.data.headimgurl);
 });
}
this.url = encodeURIComponent(location.href.split("#/")[0]);//獲取配置的路徑
this.$axios.get(`*********?url=${this.url}`).then(res => {
 this.res = res.data;
 wx.config({
 debug: false, // 開啟調(diào)試模式,
 appId: res.data.appId, // 必填，企業(yè)號的唯一標(biāo)識，此處填寫企業(yè)號corpid
 timestamp: res.data.timestamp, // 必填，生成簽名的時(shí)間戳
 nonceStr: res.data.nonceStr, // 必填，生成簽名的隨機(jī)串
 signature: res.data.signature, // 必填，簽名，見附錄1
 jsApiList: [
 "updateAppMessageShareData",
 "updateTimelineShareData",
 "showMenuItems",
 "hideAllNonBaseMenuItem"
 ] // 必填，需要使用的JS接口列表，所有JS接口列表見附錄2
 });
 //參考公眾平臺寫的：
 wx.ready(function() {
 wx.hideAllNonBaseMenuItem();
 wx.showMenuItems({
 menuList: [
 "menuItem:share:appMessage",
 "menuItem:share:timeline",
 "menuItem:favorite"
 ] // 要顯示的菜單項(xiàng)，所有menu項(xiàng)見附錄3
 });
 wx.updateTimelineShareData({
 title: "******", // 分享標(biāo)題
 desc: "*********", // 分享描述
 link: "**********", // 分享鏈接，該鏈接域名或路徑必須與當(dāng)前頁面對應(yīng)的公眾號JS安全域名一致
 imgUrl: "******", // 分享圖標(biāo)
 success: function() {
 ***** 執(zhí)行結(jié)束后執(zhí)行的回調(diào)
 }
 });
 wx.updateAppMessageShareData({
 title: "*******", // 分享標(biāo)題
 desc: "*********", // 分享描述
 link: "*********", // 分享鏈接，該鏈接域名或路徑必須與當(dāng)前頁面對應(yīng)的公眾號JS安全域名一致
 imgUrl: "********, // 分享圖標(biāo)
 success: function() {
 *******
 }
 });
 });
 }

//默認(rèn)調(diào)用一次設(shè)置
 setHtmlFontSize();
 
 function setHtmlFontSize() {
 // 1. 獲取當(dāng)前屏幕的寬度
 var windowWidth = document.documentElement.offsetWidth;
 // console.log(windowWidth);
 // 2. 定義標(biāo)準(zhǔn)屏幕寬度 假設(shè)375
 var standardWidth = 375;
 // 3. 定義標(biāo)準(zhǔn)屏幕的根元素字體大小 假設(shè)100px 1rem=100px 10px = 0.1rem 1px 0.01rem
 var standardFontSize = 100;
 // 4. 計(jì)算當(dāng)前屏幕對應(yīng)的根元素字體大小
 var nowFontSize = windowWidth / standardWidth * standardFontSize + 'px';
 // console.log(nowFontSize);
 // 5. 把當(dāng)前計(jì)算的根元素的字體大小設(shè)置到html上
 document.querySelector('html').style.fontSize = nowFontSize;
 }
 // 6. 添加一個(gè)屏幕寬度變化的事件 屏幕變化就觸發(fā)變化根元素字體大小計(jì)算的js 
 window.addEventListener('resize', setHtmlFontSize);