1、页面代码：
<el-menu
:default-active="activeIndex" router
class="el-menu-demo"
mode="horizontal"
@select="handleSelect"
background-color="#545c64"
text-color="#fff"
active-text-color="#ffd04b">
<el-menu-item index="home">首页</el-menu-item>
<el-submenu index="2">
<template slot="title">達豐中国</template>
<el-menu-item index="about">達豐概况</el-menu-item>
<el-menu-item index="culture">達豐文化</el-menu-item>
<el-menu-item index="history">達豐年鉴</el-menu-item>
<el-menu-item index="trailer">宣传片</el-menu-item>
</el-submenu>
</el-menu>
<script>
export default {
data() {
return {
activeIndex: '1',
activeIndex2: '1'
};
},
computed:{
},
methods: {
handleSelect(key, keyPath) {
console.log(key, keyPath);
}
}
}
</script>
2、在index.js文件里设置跳转地址
import home from '@/page/home/home.vue'
import about from '@/page/about/about.vue'
import culture from '@/page/about/culture.vue'
import history from '@/page/about/history.vue'
import trailer from '@/page/about/trailer.vue'
const routes = [
{
path:'/',
component: home,
},
{
path:'/home',
component: home,
},
{
path:'/about',
component: about,
},
{
path:'/culture',
component: culture,
},
{
path:'/history',
component: history,
},
{
path:'/trailer',
component: trailer,
},
]
export default new Router({
mode:'history', //可以去掉#
linkActiveClass: 'active',
routes
})
3、footer部分代码：
<ul class="foot-list">
<li class="foot-item" @click="skip('about')">達豐概况</li>
<li class="foot-item" @click="skip('culture')">達豐文化</li>
<li class="foot-item" @click="skip('history')">達豐年鉴</li>
<li class="foot-item" @click="skip('trailer')">宣传片</li>
</ul>
<script>
export default {
data() {
return {
}
},
methods: {
skip(a){
this.$router.push(a)
}
}
}
</script>