vue里使用element餓了么的el-menu+vue-router實現路由跳轉的兩種方法

最近准備寫一個echarts的可視化展示案例，首先用vue-cli3創建了一個項目（好像vue-cli4也出來，感覺變化不大，就沒升級了）

然后，開始配置路由↓下面是我的router.js文件

import Vue from "vue";
import VueRouter from "vue-router";
import Home from "@/views/main/index.vue";

Vue.use(VueRouter);

const routes = [
  {
    path: "/",
    name: "home",
    component: Home,
		redirect: "/home",
		children:[
			{
				path: 'home',
				name: 'home',
				component: () => import("@/views/home/index.vue")
			},
			{
				path: 'charts/gauge',
				name: 'gauge',
				component: () => import("@/charts/gauge/index.vue")
			},
			{
				path: 'charts/bar',
				name: 'bar',
				component: () => import("@/charts/bar/index.vue")
			},
			{
				path: 'charts/line',
				name: 'line',
				component: () => import("@/charts/line/index.vue")
			}
		]
  }
];


// 路由配置
const RouterConfig = {
  mode: 'history', // require service support
  scrollBehavior: () => ({
    y: 0
  }),
  routes
}
// export const router = new Router(RouterConfig)
const createRouter = () => new VueRouter(RouterConfig)

// 創建路由實例
const router = createRouter()
// 添加動態路由
// addAsyncRouter()

export default router;

路由配好后下面就開始寫測邊欄的菜單

 

 代碼如下

<!-- 側邊欄 -->
			<el-aside style="background-color: #545c64" width="">
				<el-menu
					@select="handleSelect"
					background-color="#545c64"
					text-color="#fff"
					active-text-color="#ffd04b"
					default-active="/home"
					:collapse="isCollapse"
					:class="{ 'myMenu': isActive }"
					>
					<el-menu-item index="/home">
						<i class="el-icon-menu"></i>
						<span slot="title">首頁</span>
					</el-menu-item>
					<el-submenu index="2">
						<template slot="title">
							<i class="el-icon-s-data"></i>
							<span>echarts</span>
						</template>
						<el-menu-item index="/charts/gauge">儀表盤</el-menu-item>
						<el-menu-item index="/charts/bar">柱狀圖</el-menu-item>
						<el-menu-item index="/charts/line">折線圖</el-menu-item>
					</el-submenu>
				</el-menu>
			</el-aside>

第一種方法：

利用select事件函數傳遞path值，使用this.$router.push()進行路由跳轉

說明一下這個方法我在<el-menu>的屬性里沒有加router屬性，還有就是<el-menu-item>里的index屬性要寫上你將要跳轉的路由地址

select綁定的方法里js代碼這樣寫的↓

handleSelect(key, keyPath) {
   this.$router.push({
        path: key,
        params: {data: 'query' }
      })
}

這樣就可以實現路由跳轉了key就是你每次點擊菜單傳過來index的屬性值

 

第二種方法：

就很簡單了，在<el-menu>里加上router屬性就可以了

看看官網怎么說的

 

 默認true

這樣就很方便，只要你<el-menu-item>里的index屬性值正確就可以直接跳轉了，不用再寫js方法了

------------------------

這兩種方法可以根據需求來選擇，如果你跳到下個頁面需要傳值，那就用第一種方法