element-ui使用導航欄跳轉路由的用法詳解

2019-11-19 13:11:20

字體：大中小

來源：轉載

供稿：網友

最近初學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中使用路由進行配置：