vue中局部页面跳转_VUE vue和element框架搭配实现导航跳转，底部导航跳转页面

1、页面代码：

:default-active="activeIndex" router

class="el-menu-demo"

mode="horizontal"

@select="handleSelect"

background-color="#545c64"

text-color="#fff"

active-text-color="#ffd04b">

首页

達豐中国

達豐概况

達豐文化

達豐年鉴

宣传片

export default {

data() {

return {

activeIndex: ‘1‘,

activeIndex2: ‘1‘

};

},

computed:{

},

methods: {

handleSelect(key, keyPath) {

console.log(key, keyPath);

}

}

}

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部分代码：

• 達豐概况
• 達豐文化
• 達豐年鉴
• 宣传片

export default {

data() {

return {

}

},

methods: {

skip(a){

this.$router.push(a)

}

}

}

原文：https://www.cnblogs.com/haimeimei/p/13228353.html