因为商品详情页面是通过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;