溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
最近初學vue，試著做一個小項目熟悉語法與思想，其中使用elemen-ui的導航欄做路由跳轉切換頁面。下面記錄一下學習過程
element-ui引入vue項目的用法參考element官網
首先復制官網的例子，在這基礎上再修改成我們想要的樣子。
<el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal" @select="handleSelect">
<el-menu-item index="1">處理中心</el-menu-item>
<el-submenu index="2">
<template slot="title">我的工作臺</template>
<el-menu-item index="2-1">選項1</el-menu-item>
<el-menu-item index="2-2">選項2</el-menu-item>
<el-menu-item index="2-3">選項3</el-menu-item>
<el-submenu index="2-4">
<template slot="title">選項4</template>
<el-menu-item index="2-4-1">選項1</el-menu-item>
<el-menu-item index="2-4-2">選項2</el-menu-item>
<el-menu-item index="2-4-3">選項3</el-menu-item>
</el-submenu>
</el-submenu>
<el-menu-item index="3" disabled>消息中心</el-menu-item>
<el-menu-item index="4"><a rel="external nofollow" target="_blank">訂單管理</a></el-menu-item>
</el-menu>
<script>
export default {
data() {
return {
activeIndex: '1'
};
},
methods: {
handleSelect(key, keyPath) {
console.log(key, keyPath);
}
}
}
</script>
屬性：
* default-active：表示當前active的菜單項的編號
* index：類型為字符串，在每一個el-menu-item組件上都有一個編號，給default-active標記
使用菜單欄進行路由跳轉：
<el-menu :default-active="this.$router.path" router mode="horizontal">
<el-menu-item v-for="(item,i) in navList" :key="i" :index="item.name">
{{ item.navItem }}
</el-menu-item>
</el-menu>
數據：
data() {
return {
navList:[
{name:'/findProject',navItem:'發現項目'},
{name:'/communityActivity',navItem:'社區動態'},
{name:'/publishProject',navItem:'發布項目'},
{name:'/personalCenter',navItem:'個人中心'},
{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
}]
})
使用菜單欄進行路由跳轉有幾個注意點：
1. 在el-menu加上router
2. index必須綁定路由的path,參考上面的例子，'/'不能少
3. default-active設為當前路由（this.$router.path）,這樣在路由變化的時候，對應的menu-item才會高亮。
拓展知識：vue項目中的路由配置方法
公司的項目使用vue腳手架來搭建，是屬于后臺管理系統。功能頁比較多，就使用vue路由來進行跳轉；
個人比較習慣上面這種方式放置路由文件，并且使用懶加載的模式來配置，如下：
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',//去掉#號
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: '系統首頁'}
},
{
path: '/set',
component: resolve => require(['../components/set.vue'],resolve),
meta: {title: '設置'}
},
{
path: '/user',
component: resolve => require(['../components/user.vue'],resolve),
meta: {title: '賬戶管理'}
},
{
path: '/member',
component: resolve => require(['../components/memberList/memberList.vue'],resolve),
meta: {title: '會員列表'}
},
{
path: '/baseCharts',
component: resolve => require(['../components/charts/baseCharts.vue'],resolve),
meta: {title: '會員分析'}
}
]
}
]
})
在main.js中使用路由進行配置：
這樣就可以在需要的地方使用路由了。
以上這篇element-ui使用導航欄跳轉路由的用法詳解就是小編分享給大家的全部內容了，希望能給大家一個參考，也希望大家多多支持億速云。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
