最近初學(xué)vue，試著做一個(gè)小項(xiàng)目熟悉語(yǔ)法與思想，其中使用elemen-ui的導(dǎo)航欄做路由跳轉(zhuǎn)切換頁(yè)面。下面記錄一下學(xué)習(xí)過(guò)程
創(chuàng)新互聯(lián)是網(wǎng)站建設(shè)技術(shù)企業(yè)，為成都企業(yè)提供專(zhuān)業(yè)的成都網(wǎng)站設(shè)計(jì)、網(wǎng)站制作、外貿(mào)營(yíng)銷(xiāo)網(wǎng)站建設(shè)，網(wǎng)站設(shè)計(jì)，網(wǎng)站制作，網(wǎng)站改版等技術(shù)服務(wù)。擁有十余年豐富建站經(jīng)驗(yàn)和眾多成功案例，為您定制適合企業(yè)的網(wǎng)站。十余年品質(zhì)，值得信賴(lài)！
element-ui引入vue項(xiàng)目的用法參考element官網(wǎng)
首先復(fù)制官網(wǎng)的例子，在這基礎(chǔ)上再修改成我們想要的樣子。
處理中心 我的工作臺(tái) 選項(xiàng)1 選項(xiàng)2 選項(xiàng)3 選項(xiàng)4 選項(xiàng)1 選項(xiàng)2 選項(xiàng)3 消息中心 訂單管理
屬性：
* default-active：表示當(dāng)前active的菜單項(xiàng)的編號(hào)
* index：類(lèi)型為字符串，在每一個(gè)el-menu-item組件上都有一個(gè)編號(hào)，給default-active標(biāo)記
使用菜單欄進(jìn)行路由跳轉(zhuǎn)：
{{ item.navItem }}
數(shù)據(jù)：
重慶分公司
重慶分公司
data() {
return {
navList:[
{name:'/findProject',navItem:'發(fā)現(xiàn)項(xiàng)目'},
{name:'/communityActivity',navItem:'社區(qū)動(dòng)態(tài)'},
{name:'/publishProject',navItem:'發(fā)布項(xiàng)目'},
{name:'/personalCenter',navItem:'個(gè)人中心'},
{name:'/manageCenter',navItem:'管理員中心'},
]
}
}路由：
export default new Router({
routes: [{
path: '*',
redirect: '/findProject'
}, {
path: '/findProject',
name: 'findProject',
component: findProject
}, {
path: '/communityActivity',
name: 'communityActivity',
component: communityActivity
}, {
path: '/publishProject',
name: 'publishProject',
component: publishProject
}, {
path: '/personalCenter',
name: 'personalCenter',
component: personalCenter
}, {
path: '/manageCenter',
name: 'manageCenter',
component: manageCenter
}]
})使用菜單欄進(jìn)行路由跳轉(zhuǎn)有幾個(gè)注意點(diǎn)：
1. 在el-menu加上router
2. index必須綁定路由的path,參考上面的例子，'/'不能少
3. default-active設(shè)為當(dāng)前路由（this.$router.path）,這樣在路由變化的時(shí)候，對(duì)應(yīng)的menu-item才會(huì)高亮。
拓展知識(shí)：vue項(xiàng)目中的路由配置方法
公司的項(xiàng)目使用vue腳手架來(lái)搭建，是屬于后臺(tái)管理系統(tǒng)。功能頁(yè)比較多，就使用vue路由來(lái)進(jìn)行跳轉(zhuǎn)；
個(gè)人比較習(xí)慣上面這種方式放置路由文件，并且使用懶加載的模式來(lái)配置，如下：
import Vue from 'vue'
import Router from 'vue-router'
//import Login from '.././views/login.vue'
//import NotFound from '.././views/404.vue'
//import Home from '.././views/index.vue'
Vue.use(Router)
export default new Router({
mode: 'history',//去掉#號(hào)
routes: [
{
path: '/login',
name: 'Login',
component: resolve => require(['../views/login.vue'],resolve)
},
{
path: '/404',
name: 'NotFound',
component: resolve => require(['../views/404.vue'],resolve)
},
{
path: '/',
redirect: '/default'
},
{
path: '/',
name: 'Home',
component: resolve => require(['../views/index.vue'],resolve),
meta: {title: '自述文件'},
children:[
{
path: '/default',
component: resolve => require(['../components/default.vue'],resolve),
meta: {title: '系統(tǒng)首頁(yè)'}
},
{
path: '/set',
component: resolve => require(['../components/set.vue'],resolve),
meta: {title: '設(shè)置'}
},
{
path: '/user',
component: resolve => require(['../components/user.vue'],resolve),
meta: {title: '賬戶(hù)管理'}
},
{
path: '/member',
component: resolve => require(['../components/memberList/memberList.vue'],resolve),
meta: {title: '會(huì)員列表'}
},
{
path: '/baseCharts',
component: resolve => require(['../components/charts/baseCharts.vue'],resolve),
meta: {title: '會(huì)員分析'}
}
]
}
]
})在main.js中使用路由進(jìn)行配置：
這樣就可以在需要的地方使用路由了。
以上這篇element-ui使用導(dǎo)航欄跳轉(zhuǎn)路由的用法詳解就是小編分享給大家的全部?jī)?nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持創(chuàng)新互聯(lián)。
