极客观点
项目管理
HarmonyOS
问：在IE下，为什么点击一级菜单地址栏变了，但是页面内容没变？（Chrome就不会）
如下图，点击一级菜单后，url变了，但是内容没变
点击二级菜单url跟内容都变
customer.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
h2 {
color: green;
}
</style>
</head>
<body>
<div id="wrap">
<h4>一级菜单</h4>
<header-menu></header-menu>
<section id="page-content">
<div class="content">
<!-- 二级菜单 -->
<h4>二级菜单</h4>
<second-menu :second_menu="second_menu"></second-menu>
<!-- 二级菜单对应板块 -->
<router-view></router-view>
</div>
</section>
</div>
<script src="https://cdn.bootcss.com/babel-polyfill/7.2.5/polyfill.min.js"></script>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
<script src="https://unpkg.com/vuex@3.1.1/dist/vuex.js"></script>
<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
<script>
Vue.component('header-menu', {
template:
'<header class="content clearfix">' +
'<div class="right">' +
'<div class="nav-bt">' +
' <ul class="clearfix father-ul">' +
' <li>' +
' <a :class="{current:customer_cur}" :href="customer_src">帮助</a>' +
' <div class="drop-div">' +
' <span class="trangle"></span>' +
'<ul class="child-ul">' +
'<li v-for="item in customer_child_menu"><a :href="item.href">{{item.content}}</a></li>' +
'</ul>' +
'</div>' +
'</li>' +
' </ul>' +
'</div>' +
'</div>' +
'</header>'
,
data: function () {
return {
logo_src: '../../static/img/logo.png',
index_cur: true,
customer_cur: false,
about_cur: false,
// 一级导航链接
index_src: store.state.page_src.index_src,
customer_src: store.state.page_src.customer_src,
about_src: store.state.page_src.about_src,
// 二级导航
customer_child_menu: [
{
content: '常见问题',
href: store.state.page_src.question_src,
}, {
content: '下载',
href: store.state.page_src.softdown_src,
}, {
content: '说明',
href: store.state.page_src.infodown_src,
},
]
}
},
methods: {
// 菜单点击
current: function () {
$('.nav-bt .father-ul li').on('mouseover', function () {
if ($(this).find('.drop-div')) {
$(this).find('.drop-div').show();
}
}).on('mouseout', function () {
if ($(this).find('.drop-div')) {
$(this).find('.drop-div').hide();
}
});
},
},
mounted: function () {
// 进行DOM操作
let self = this;
// 顶部菜单点击
this.current();
}
});
// 页面二级菜单
Vue.component('second-menu', {
props: ['second_menu'],
template:
' <div class="second-menu">' +
'<ul>' +
'<li v-for="item in second_menu" :data-show="item.id"><router-link :to="item.id">{{item.content}}</router-link></li>' +
' </ul>' +
'</div> '
,
computed: {
},
methods: {
},
mounted: function () {
}
});
let store = new Vuex.Store({
state: {
page_src: {
index_src: './index.html',
customer_src: './customer.html#/question',
question_src: './customer.html#/question',
softdown_src: './customer.html#/softdown',
infodown_src: './customer.html#/infodown',
about_src: './about.html',
}
}
})
</script>
<script>
var Question = {
template:
'<div id="question" class="page-content-box">' +
'<h2>问题</h2>' +
' </div>'
}
var Softdown = {
template:
'<div id="softdown" class="page-content-box">' +
'<h2>下载</h2>' +
'</div>'
,
}
var Infodown = {
template:
'<div id="infodown" class="page-content-box">' +
'<h2>说明</h2>' +
'</div>'
,
}
var router = new VueRouter({
routes: [
{
path: '/question', component: Question
},
{
path: '/softdown', component: Softdown
},
{
path: '/infodown', component: Infodown
}
]
})
var company = new Vue({
el: '#wrap',
router: router,
data: {
banner_src: '../../static/img/banner5.png',
second_menu: [
{ id: 'question', content: '常见问题' },
{ id: 'softdown', content: '下载' },
{ id: 'infodown', content: '说明' },
]
}
})
</script>
</body>
</html>
参考链接