elementui路由
ElementUI 与路由结合使用
ElementUI 是一个基于 Vue.js 的组件库，而路由通常使用 Vue Router 来实现。以下是结合 ElementUI 和 Vue Router 的常见方法。
安装 Vue Router
确保项目中已安装 Vue Router。如果没有安装，可以通过以下命令安装：
npm install vue-router配置路由
在项目的 src 目录下创建 router 文件夹，并新建 index.js 文件。配置路由如下：
import Vue from 'vue'
import Router from 'vue-router'
import Home from '@/views/Home.vue'
import About from '@/views/About.vue'
Vue.use(Router)
export default new Router({
routes: [
{
path: '/',
name: 'Home',
component: Home
},
{
path: '/about',
name: 'About',
component: About
}
]
})在主文件中引入路由
在 main.js 中引入路由配置：
import Vue from 'vue'
import App from './App.vue'
import router from './router'
new Vue({
router,
render: h => h(App)
}).$mount('#app')在组件中使用路由
在组件中可以通过 this.$router 访问路由实例，通过 this.$route 访问当前路由信息。例如，在 ElementUI 的按钮中跳转路由：
<el-button @click="$router.push('/about')">跳转到关于页面</el-button>使用路由菜单
ElementUI 提供了 el-menu 组件，可以结合路由实现导航菜单：
<el-menu :router="true" mode="horizontal">
<el-menu-item index="/">首页</el-menu-item>
<el-menu-item index="/about">关于</el-menu-item>
</el-menu>设置 :router="true" 后，点击菜单项会自动跳转到对应的路由路径。
动态路由
如果需要动态生成路由菜单，可以通过遍历路由配置实现：
<el-menu :router="true">
<el-menu-item
v-for="route in $router.options.routes"
:key="route.path"
:index="route.path"
>
{{ route.name }}
</el-menu-item>
</el-menu>路由守卫
可以在路由配置中添加导航守卫，例如全局前置守卫：
router.beforeEach((to, from, next) => {
if (to.path === '/about') {
alert('即将进入关于页面')
}
next()
})嵌套路由
ElementUI 的布局组件（如 el-container）可以与嵌套路由结合使用。例如：
{
path: '/user',
component: UserLayout,
children: [
{
path: 'profile',
component: UserProfile
},
{
path: 'settings',
component: UserSettings
}
]
}路由懒加载
为了优化性能，可以使用路由懒加载：
const About = () => import('@/views/About.vue')路由参数传递
可以通过路由传递参数，例如：
this.$router.push({ path: '/user', query: { id: '123' } })在目标组件中通过 this.$route.query.id 获取参数。
以上是 ElementUI 与 Vue Router 结合使用的常见方法，涵盖了路由配置、导航、守卫和参数传递等场景。
