Element Vue Router 是一個基于 Vue 的路由管理器,可以讓開發者輕松地實現路由功能。它是由餓了么團隊開發的,借鑒了 Vue Router 的代碼結構和 API,但是重新實現了一些功能,使得它更加容易使用和更加符合項目需求。下面我們將對 Element Vue Router 進行介紹。
首先,我們需要在項目中安裝 Element Vue Router:
npm install element-ui-verify --save
安裝完成后,我們就可以在項目中使用 Element Vue Router 了。下面我們來看一個簡單的例子,說明如何使用 Element Vue Router。
<template>
<div>
<el-nav-menu
default-active="1"
class="el-menu-vertical-demo"
router
>
<router-link
tag="el-menu-item"
v-for="(item, index) in menuList"
:key="index"
:to="{ path: item.link }"
:index="index"
>
{{ item.name }}
</router-link>
</el-nav-menu>
<router-view />
</div>
</template>
<script>
export default {
data() {
return {
menuList: [
{
name: 'Home',
link: '/home'
},
{
name: 'About',
link: '/about'
},
{
name: 'Contact',
link: '/contact'
}
]
};
}
};
</script>
在上面的代碼中,我們首先使用了 Element UI 的 NavMenu 組件,然后給它添加了 router 屬性,這樣它才能夠被 Element Vue Router 當作導航菜單使用。接著我們使用了 Vue Router 的 router-link 組件來生成菜單項和路由鏈接,同時給它們加上了對應的 to 屬性,這樣當用戶點擊菜單項時,就會跳轉到指定的路由路徑。最后我們在頁面底部使用了 Vue Router 的 router-view 組件,這個組件會自動渲染對應的路由頁面。這樣,我們就成功地實現了一個簡單的路由應用。