樂優商城從商品詳情頁跳轉問題
阿新 • • 發佈：2018-11-03
因為商品詳情頁面是通過leyou-goods-web微服務渲染得到，所以在地址字首中就有item：
所以在此頁面進行跳轉的話，必須將原來的路徑替換，因為如果路徑中還有item的話，又回到了leyou-goods-web中的Controller裡，跳轉失敗。
這個導航條是單獨的一個控制元件，在shortcut.js中：
const shortcut = { template: "\ <div class='py-container'> \ <div class='shortcut'> \ <ul class='fl'> \ <li class='f-item'>樂優歡迎您！</li> \ <li class='f-item' v-if='user && user.username'>\ 尊敬的會員，<span style='color: red;'>{{user.username}}</span>\ </li>\ <li v-else class='f-item'> \ 請<a href='javascript:void(0)' @click='gotoLogin'>登入</a> \ <span><a href='javascript:void(0)' @click='gotoRegister' target='_blank'>免費註冊</a></span> \ </li> \ </ul> \ <ul class='fr'> \ <li class='f-item'>我的訂單</li> \ <li class='f-item space'></li> \ <li class='f-item'><a href='home.html' target='_blank'>我的樂優</a></li> \ <li class='f-item space'></li> \ <li class='f-item'>樂優會員</li> \ <li class='f-item space'></li> \ <li class='f-item'>企業採購</li> \ <li class='f-item space'></li> \ <li class='f-item'>關注樂優</li> \ <li class='f-item space'></li> \ <li class='f-item' id='service'> \ <span>客戶服務</span> \ <ul class='service'> \ <li><a href='cooperation.html' target='_blank'>合作招商</a></li> \ <li><a href='shoplogin.html' target='_blank'>商家後臺</a></li> \ <li><a href='cooperation.html' target='_blank'>合作招商</a></li> \ <li><a href='#'>商家後臺</a></li> \ </ul> \ </li> \ <li class='f-item space'></li> \ <li class='f-item'>網站導航</li> \ </ul> \ </div> \ </div>\ ", name: "shortcut", data() { return { user: null } }, created() { ly.http("/auth/verify").then(resp => { this.user = resp.data; }) }, methods: { gotoLogin() { window.location = "http://www.leyou.com/login.html?returnUrl=" + window.location; }, gotoRegister(){ window.location = "http://www.leyou.com/register.html"; } } } export default shortcut;
在這裡，修改頁面跳轉的方式，補全跳轉路徑。
同樣需要修改top中的跳轉連結：
修改top.js：
const lyTop = { template: "\ <div class='nav-top'> \ <shortcut/>\ <!--頭部--> \ <div class='header' id='headApp'> \ <div class='py-container'> \ <div class='yui3-g Logo'> \ <div class='yui3-u Left logoArea'> \ <a class='logo-bd' title='樂優' @click='gotoIndex' href='javascript:void(0)' target='_blank'></a> \ </div> \ <div class='yui3-u Center searchArea'> \ <div class='search'> \ <form action='' class='sui-form form-inline'> \ <!--searchAutoComplete--> \ <div class='input-append'> \ <input type='text' id='autocomplete' v-model='key' \ class='input-error input-xxlarge'/> \ <button @click='search' class='sui-btn btn-xlarge btn-danger' type='button'>搜尋</button> \ </div> \ </form> \ </div> \ <div class='hotwords'> \ <ul> \ <li class='f-item'>樂優首發</li> \ <li class='f-item'>億元優惠</li> \ <li class='f-item'>9.9元團購</li> \ <li class='f-item'>每滿99減30</li> \ <li class='f-item'>億元優惠</li> \ <li class='f-item'>9.9元團購</li> \ <li class='f-item'>辦公用品</li> \ </ul> \ </div> \ </div> \ <div class='yui3-u Right shopArea'> \ <div class='fr shopcar'> \ <div class='show-shopcar' id='shopcar'> \ <span class='car'></span> \ <a class='sui-btn btn-default btn-xlarge' href='javascript:void(0)' @click='gotoCart' target='_blank'> \ <span>我的購物車</span> \ <i class='shopnum'>0</i> \ </a> \ <div class='clearfix shopcarlist' id='shopcarlist' style='display:none'> \ <p>'啊哦，你的購物車還沒有商品哦！'</p> \ <p>'啊哦，你的購物車還沒有商品哦！'</p> \ </div> \ </div> \ </div> \ </div> \ </div> \ <div class='yui3-g NavList'> \ <div class='yui3-u Left all-sort'> \ <h4>樂優精品</h4> \ </div> \ <div class='yui3-u Center navArea'> \ <ul class='nav'> \ <li class='f-item'>服裝城</li> \ <li class='f-item'>美妝館</li> \ <li class='f-item'>品優超市</li> \ <li class='f-item'>全球購</li> \ <li class='f-item'>閃購</li> \ <li class='f-item'>團購</li> \ <li class='f-item'>有趣</li> \ <li class='f-item'><a href='javascript:void(0)' @click='gotoSeckill' target='_blank'>秒殺</a></li> \ </ul> \ </div> \ <div class='yui3-u Right'></div> \ </div> \ </div> \ </div>\ </div> \ ", name:'ly-top', data() { return { key: "", query: location.search } }, methods: { search() { window.location = 'search.html?key=' + this.key; }, getUrlParam: function (name) { var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i"); var r = window.location.search.substr(1).match(reg); if (r != null) { return decodeURI(r[2]); } return null; }, gotoIndex(){ window.location = "http://www.leyou.com/index.html"; }, gotoSeckill(){ window.location = "http://www.leyou.com/seckill-index.html"; }, gotoCart(){ window.location = "http://www.leyou.com/cart.html"; } }, created() { this.key = this.getUrlParam("key"); }, components: { shortcut:() => import('./shortcut.js') } } export default lyTop;