【Element进阶】2、Element UI与Vue Router结合

已于 2024-05-26 15:54:50 修改
阅读量1k 收藏 13
点赞数 24
分类专栏： 前端教学-爪磕 Element UI系列 文章标签： ui vue.js 前端 elementui 前端框架 vscode visual studio code
于 2024-05-23 14:05:14 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_52938153/article/details/139125226
版权

【Element进阶】Element UI与Vue Router结合

系列文章导航：

【Element进阶】1、深入理解Element UI的国际化
【Element进阶】2、Element UI与Vue Router结合（本文）
【Element进阶】3、Element UI与Vuex结合
【Element进阶】4、Element UI 复杂表单处理
【Element进阶】5、自定义组件与Element UI集成
【Element进阶】6、Element UI 高阶数据展示
【Element进阶】7、Element UI 性能优化
【Element进阶】8、Element UI 最佳实践与案例分析

在现代 Web 应用开发中，单页面应用（SPA）已经成为主流。Vue.js 提供了强大的路由功能，通过 Vue Router 可以轻松地管理应用的导航和视图切换。而 Element UI 提供了丰富的组件库，可以与 Vue Router 无缝结合，快速构建功能强大且美观的单页面应用。本篇文章将详细介绍如何使用 Element UI 和 Vue Router 创建单页面应用，并实现导航守卫与权限管理。

使用Element UI和Vue Router创建单页面应用

基本概念

Vue Router 是 Vue.js 的官方路由管理器，它深度集成了 Vue.js 核心，支持嵌套路由、动态路由、路由守卫等功能。通过结合 Element UI 的导航组件，我们可以轻松地创建一个功能完善的单页面应用。

安装和配置 Vue Router

首先，安装 Vue Router：

npm install vue-router --save

然后，在项目中配置 Vue Router：

// src/router/index.js
import Vue from 'vue';
import Router from 'vue-router';
import Home from '@/components/Home.vue';
import About from '@/components/About.vue';
import Contact from '@/components/Contact.vue';

Vue.use(Router);

export default new Router({
  mode: 'history',
  routes: [
    {
      path: '/',
      name: 'Home',
      component: Home
    },
    {
      path: '/about',
      name: 'About',
      component: About
    },
    {
      path: '/contact',
      name: 'Contact',
      component: Contact
    }
  ]
});

在这个示例中，我们创建了一个基本的路由配置文件，并定义了三个路由：Home、About 和 Contact。

创建基础组件

接下来，创建对应的页面组件：

// src/components/Home.vue
<template>
  <div>
    <h1>Home</h1>
    <p>Welcome to the home page!</p>
  </div>
</template>

<script>
export default {
  name: 'Home'
};
</script>

// src/components/About.vue
<template>
  <div>
    <h1>About</h1>
    <p>About us page content.</p>
  </div>
</template>

<script>
export default {
  name: 'About'
};
</script>

// src/components/Contact.vue
<template>
  <div>
    <h1>Contact</h1>
    <p>Contact us page content.</p>
  </div>
</template>

<script>
export default {
  name: 'Contact'
};
</script>

配置主应用入口

在 main.js 中引入和配置 Vue Router：

// src/main.js
import Vue from 'vue';
import App from './App.vue';
import router from './router';
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';

Vue.config.productionTip = false;

Vue.use(ElementUI);

new Vue({
  router,
  render: h => h(App)
}).$mount('#app');

创建导航栏

最后，使用 Element UI 的 Menu 组件创建导航栏：

// src/App.vue
<template>
  <div id="app">
    <el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal" @select="handleSelect">
      <el-menu-item index="1" route="/"><router-link to="/">Home</router-link></el-menu-item>
      <el-menu-item index="2" route="/about"><router-link to="/about">About</router-link></el-menu-item>
      <el-menu-item index="3" route="/contact"><router-link to="/contact">Contact</router-link></el-menu-item>
    </el-menu>
    <router-view></router-view>
  </div>
</template>

<script>
export default {
  name: 'App',
  data() {
    return {
      activeIndex: '1'
    };
  },
  methods: {
    handleSelect(key, keyPath) {
      this.activeIndex = key;
    }
  }
};
</script>

<style>
.el-menu-demo {
  background-color: #333;
  color: #fff;
}
.el-menu-demo .el-menu-item {
  color: #fff;
}
</style>

在这个示例中，我们创建了一个包含三个导航项的导航栏，并使用 router-link 组件实现路由跳转。通过 router-view 组件，页面内容会根据当前路由自动更新。

导航守卫与权限管理

基本概念

导航守卫是 Vue Router 提供的一种导航钩子，用于在路由跳转前或跳转后执行特定的逻辑。通过导航守卫，我们可以实现权限管理、登录验证、动态标题等功能。

全局导航守卫

全局导航守卫适用于所有路由，可以在路由实例中配置：

// src/router/index.js
import Vue from 'vue';
import Router from 'vue-router';
import Home from '@/components/Home.vue';
import About from '@/components/About.vue';
import Contact from '@/components/Contact.vue';

Vue.use(Router);

const router = new Router({
  mode: 'history',
  routes: [
    {
      path: '/',
      name: 'Home',
      component: Home
    },
    {
      path: '/about',
      name: 'About',
      component: About,
      meta: { requiresAuth: true }
    },
    {
      path: '/contact',
      name: 'Contact',
      component: Contact
    }
  ]
});

router.beforeEach((to, from, next) => {
  // 检查路由是否需要验证
  if (to.matched.some(record => record.meta.requiresAuth)) {
    // 这里检查用户是否已登录
    if (!isLoggedIn()) {
      next({
        path: '/',
        query: { redirect: to.fullPath }
      });
    } else {
      next();
    }
  } else {
    next();
  }
});

function isLoggedIn() {
  // 这里应该是实际的验证逻辑，例如检查 token 是否存在
  return localStorage.getItem('user-token');
}

export default router;

在这个示例中，我们在 About 路由上添加了 meta: { requiresAuth: true }，表示该路由需要认证。通过 router.beforeEach 钩子，我们在每次导航前检查用户是否已登录，如果未登录则重定向到首页。

路由独享的守卫

路由独享守卫是特定于某个路由的导航守卫，可以在路由配置中直接定义：

// src/router/index.js
const routes = [
  {
    path: '/about',
    name: 'About',
    component: About,
    beforeEnter: (to, from, next) => {
      if (!isLoggedIn()) {
        next('/');
      } else {
        next();
      }
    }
  }
];

在这个示例中，我们在 About 路由上添加了 beforeEnter 守卫，执行和全局守卫类似的登录检查逻辑。

组件内的守卫

组件内的守卫是在组件内定义的导航钩子，适用于特定组件的导航检查：

// src/components/About.vue
<template>
  <div>
    <h1>About</h1>
    <p>About us page content.</p>
  </div>
</template>

<script>
export default {
  name: 'About',
  beforeRouteEnter(to, from, next) {
    // 在渲染该组件的对应路由被 confirm 前调用
    // 不！能！获取组件实例 `this`
    // 因为当守卫执行前，组件实例还没被创建
    next(vm => {
      if (!vm.isLoggedIn()) {
        next('/');
      } else {
        next();
      }
    });
  },
  methods: {
    isLoggedIn() {
      return localStorage.getItem('user-token');
    }
  }
};
</script>

在这个示例中，我们在组件内定义了 beforeRouteEnter 导航钩子，同样用于登录检查。

权限管理

为了实现更复杂的权限管理，我们可以将用户权限信息存储在 Vuex 中，并在导航守卫中进行验证：

// src/store/index.js
import Vue from 'vue';
import Vuex from 'vuex';

Vue.use(Vuex);

export default new Vuex.Store({
  state: {
    user: null
  },
  mutations: {
    setUser(state, user) {
      state.user = user;
    }
  },
  actions: {
    login({ commit }, user) {
      // 模拟登录操作
      localStorage.setItem('user-token', user.token);
      commit('setUser', user);
    },
    logout({ commit }) {
      localStorage.removeItem('user-token');
      commit('setUser', null);
    }
  },
  getters: {
    isLoggedIn: state => !!state.user,
    userRole: state => state.user ? state.user.role : null
  }
});

在这个示例中，我们在 Vuex 中存储了用户信息，并提供了登录和退出操作。getters 用于获取用户的登录状态和角色信息。

路由配置和导航守卫

接下来，我们在路由配置中使用 Vuex 进行权限验证：

// src/router/index.js
import Vue from 'vue';
import Router from 'vue-router';
import store from '@/store';
import Home from '@/components/Home.vue';
import About from '@/components/About.vue';
import Contact from '@/components/Contact.vue';
import Admin from '@/components/Admin.vue';

Vue.use(Router);

const router = new Router({
  mode: 'history',
  routes: [
    {
      path: '/',
      name: 'Home',
      component: Home
    },
    {
      path: '/about',
      name: 'About',
      component: About,
      meta: { requiresAuth: true }
    },
    {
      path: '/contact',
      name: 'Contact',
      component: Contact
    },
    {
      path: '/admin',
      name: 'Admin',
      component: Admin,
      meta: { requiresAuth: true, roles: ['admin'] }
    }
  ]
});

router.beforeEach((to, from, next) => {
  if (to.matched.some(record => record.meta.requiresAuth)) {
    if (!store.getters.isLoggedIn) {
      next({
        path: '/',
        query: { redirect: to.fullPath }
      });
    } else if (to.matched.some(record => record.meta.roles)) {
      const userRole = store.getters.userRole;
      if (to.meta.roles.includes(userRole)) {
        next();
      } else {
        next({ path: '/' });
      }
    } else {
      next();
    }
  } else {
    next();
  }
});

export default router;

在这个示例中，我们新增了 Admin 路由，并在其 meta 属性中指定了需要 admin 角色。通过 router.beforeEach 导航守卫，我们首先检查路由是否需要认证，如果需要认证但用户未登录，则重定向到首页。对于需要特定角色的路由，我们进一步检查用户角色是否匹配。

创建 Admin 组件

创建 Admin.vue 组件，用于展示只有管理员可以访问的内容：

// src/components/Admin.vue
<template>
  <div>
    <h1>Admin Page</h1>
    <p>Welcome, administrator!</p>
  </div>
</template>

<script>
export default {
  name: 'Admin'
};
</script>

完整的 App.vue

在 App.vue 中添加导航栏，并展示用户登录状态和退出按钮：

<template>
  <div id="app">
    <el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal" @select="handleSelect">
      <el-menu-item index="1" route="/"><router-link to="/">Home</router-link></el-menu-item>
      <el-menu-item index="2" route="/about"><router-link to="/about">About</router-link></el-menu-item>
      <el-menu-item index="3" route="/contact"><router-link to="/contact">Contact</router-link></el-menu-item>
      <el-menu-item index="4" route="/admin" v-if="isAdmin"><router-link to="/admin">Admin</router-link></el-menu-item>
    </el-menu>
    <div class="login-status">
      <span v-if="isLoggedIn">Logged in as: {{ userRole }}</span>
      <el-button type="text" @click="logout" v-if="isLoggedIn">Logout</el-button>
    </div>
    <router-view></router-view>
  </div>
</template>

<script>
import { mapGetters,mapActions } from 'vuex';

export default {
  name: 'App',
  data() {
    return {
      activeIndex: '1'
    };
  },
  computed: {
    ...mapGetters(['isLoggedIn', 'userRole']),
    isAdmin() {
      return this.userRole === 'admin';
    }
  },
  methods: {
    ...mapActions(['logout']),
    handleSelect(key, keyPath) {
      this.activeIndex = key;
    }
  }
};
</script>

<style>
.el-menu-demo {
  background-color: #333;
  color: #fff;
}
.el-menu-demo .el-menu-item {
  color: #fff;
}
.login-status {
  float: right;
  padding: 10px;
  color: #fff;
}
</style>

在这个示例中，我们通过 mapGetters 获取 Vuex 中的 isLoggedIn 和 userRole 状态，并通过 mapActions 获取 logout 方法。我们还添加了一个 isAdmin 计算属性，用于检查当前用户是否是管理员。导航栏中只有管理员才能看到 Admin 菜单项，并且在右上角展示用户的登录状态和退出按钮。

完整项目结构

经过上述步骤，我们已经构建了一个包含以下功能的单页面应用：

  1. 使用 Element UI 和 Vue Router 创建导航栏和路由。
  2. 使用 Vuex 管理用户登录状态和权限信息。
  3. 通过路由守卫实现权限管理和路由访问控制。

项目结构如下：

src/
|-- components/
|   |-- Home.vue
|   |-- About.vue
|   |-- Contact.vue
|   |-- Admin.vue
|-- i18n/
|   |-- en.js
|   |-- zh-CN.js
|   |-- messages.js
|-- router/
|   |-- index.js
|-- store/
|   |-- index.js
|-- App.vue
|-- main.js

通过这个项目结构，我们可以清晰地管理组件、路由、国际化和状态管理，使项目更加模块化和易于维护。

结语

通过本章的学习，我们深入了解了如何结合 Element UI 和 Vue Router 创建单页面应用，并实现导航守卫与权限管理。我们探讨了路由配置、全局和局部导航守卫的使用方法，以及如何通过 Vuex 管理用户状态和权限信息。

通过掌握这些技能，我们可以构建更加安全、灵活的单页面应用，提升用户体验和项目的可维护性。

在接下来的章节中，我们将继续深入探讨 Element UI 的其他进阶功能，敬请期待！希望这篇文章对你有所帮助，祝你在前端开发的道路上越走越远！

一只小爪磕
关注
专栏目录
从零开始，构建电子地图网站：0_12_创建工程VUE2脚手架+element布局+router路由
吴道简的博客
03-09 529
前端框架很多，vue相对来说上手快点，所以这里选用vue。 地图js api也很多，百度、高德、腾讯、天地图都有，都是基于其自身的地图地图封装的，我们这里选择一个更经典、更原生的leaflet，这样就可以不囿于地图底图限制，且leaflet是瓦片加载，性能更好些。 写程序，不管是后端，还是前端，跟造房子有点像，都需要先有框架，再往里面填塞。 我们的前端程序，大致是这么个步骤。 1.先用vu...
vue-i18n结合Element-ui的配置方法
10-16
vue-i18n是一个专门为Vue.js开发的国际化插件，而Element-ui则是一个基于Vue.js的桌面端组件库，两者结合可以为开发多语言界面提供便利。 在文章开始的部分，作者强调了本文内容的参考价值，表明以下将介绍的方法或...
element-ui 路由动态加载功能
bianenhui91的专栏
08-09 740
vue-element路由动态加载
通过element-Plus中menu和router的绑定，实现页面跳转，完整版
最新发布
qq_60692304的博客
09-03 1013
通过vue3+elementPlus的menu组件结合router路由属性实现动态侧边栏效果，实现侧边栏动态跟随着路由的变化
【Vue篇】详解router路由 | element-ui组件 | 嵌套路由
小吉妙妙屋
12-27 2305
Vue Router是Vue.js官方提供的用于构建单页应用（SPA）的路由管理器。它能够集中处理应用程序中的路由跳转、参数传递、页面切换等功能，使得开发者可以轻松地实现前端路由功能。Vue Router具有以下特点：声明式路由配置：Vue Router使用声明式的方式配置路由，通过简单的配置项，可以定义页面路径、对应的组件以及其他相关信息。这种配置方式直观且易于维护。嵌套路由：Vue Router支持嵌套路由，即一个路由下面可以包含多个子路由，从而实现更复杂的页面结构和组织方式。
vue基础二（elementUI、vue-router）
jayLog的博客
02-01 1333
elementUI、vue-router的安装。路由和子路由功能整理
【Vue进阶】ElementUI、Vue-Router、Vuex
一个正在努力学习的iter
09-23 1038
表格组件 分页组件 三种情况都应该触发查询 mounted 组件挂载完成后 页号变化时 页大小变化时 查询传参应该根据后台需求，灵活采用不同方式 本例中因为是 get 请求，无法采用请求体，只能用 params 方式传参 返回响应的格式也许会很复杂，需要掌握【根据返回的响应结构，获取数据】的能力 分页搜索 sex 与 age 均用 表示用户没有选择的情况 age 取值 会被
【VUE】element-ui+vue-router:实现导航栏跳转路由
Mrerlou的博客
01-16 2083
我们设计三个页面，首页是App.vue, 两个导航页面分别为 About.vue, Home.vue。在App.vue 页面中有导航菜单，点击菜单分别跳转。页面中点击导航栏菜单中的某一选项卡，使用导航栏进行路由跳转。
vue-vuex-router-element-webpack:基于Vue、Vue router、Vuex、Element搭建的基础MVVM框架
05-08
Vue基础MVVM框架 技术及框架 ...Element UI (UI框架) Babel (ES6/7代码转译浏览器可执行) Webpack (打包工具) 安装调试 npm i # 或 yarn npm run start # 或 yarn start 打包 npm run build # or yarn build
基于python3+vue+Element-ui开发的CMDB 资产管理系统
12-17
【基于Python3+Vue+Element-UI开发的CMDB资产管理系统详解】 CMDB（Configuration Management Database，配置管理数据库）是IT服务管理中的重要组成部分，它主要用于记录和管理组织内部的各种IT资源及其相互关系。...
Vue3 + Vite5 + Vue Router + Pinia + Element Plus 搭建的后台管理模版
04-03
总的来说，这套"Vue3 + Vite5 + Vue Router + Pinia + Element Plus 搭建的后台管理模版"提供了一个现代化的前端开发环境，结合高效的开发工具和强大的库，使得构建后台管理系统变得更加便捷和高效。无论是对于新手...
vue+vuex+vue-router+axios+elementui
12-24
基于vue2.x+vuex+vue-router+axios+elementui的一套后台开发系统模板
Vue-Admin：基于Vue2，element ui，vue-cli，vuex，vue-router，axios，echarts后台管理系统演示。权限管理，用户管理，菜单管理。无限级菜单，下拉树形选择框
02-03
# 修改文件内容/build/webpack.base.conf.js，将element-ui和vuex-router-sync版本替换成install后node_modules目录中当前版本，注意不能用软链 # { # test: /\.js$/, # loader: 'babel-loader', # //exclude: /...
vue+elementUI+vue router+vuex综合demo
Crazy_CPU的博客
02-09 666
1.初始化工作 安装node.js 一路next 安装node.js会一并安装npm 验证方式 node -v npm -v 安装vue脚手架vue-cli npm install vue-cli -g --registry=https://registry.npm.taobao.org 显示所有模板，正常显示则说明安装依赖成功，一般使用webpack模板 vue list 命令行 vue-cli...
vue + elementUI导航组件NavMenu + vue-router实现点击在新的选项卡打开界面
2401_84433924的博客
04-29 346
今天的文章可谓是积蓄了我这几年来的应聘和面试经历总结出来的经验，干货满满呀！如果你能够一直坚持看到这儿，那么首先我还是十分佩服你的毅力的。所以看完之后，还是多多行动起来吧！可以非常负责地说，如果你能够坚持把我上面列举的内容都一个不拉地看完并且全部消化为自己的知识的话，那么你就至少已经达到了中级开发工程师以上的水平，进入大厂技术这块是基本没有什么问题的了。开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】
vue-router和element-UI的使用方法
qq_37605109的博客
01-16 360
使用element-UI的话，也得先使用 npm install element-ui --save来安装，使用样式是在第三个截图中 要想使用这个vue-touter首先得安装 使用 npm install vue-router --save 来 安装vue-router 安装完之后 ...
Vue + Element-Plus 路由模式
所行皆坦途
02-17 3940
在el-menu 中设置属性 router = " true " 开启路由模式在 el-sub-menu 中配置你想跳转到的路径。
vue中的router-view（Element-ui导航菜单栏）
this is it
04-03 7512
通过在你需要的页面进行局部的路由 需要先在当前的路由下设置children routes: [ { path: '/', name: 'Home', component: Home, children: [ { path: 'content', name: 'content', ...
Vue笔记_04（element-ui和v-router）
weixin_53402317的博客
10-15 234
Vue笔记，vue-cli（vue脚手架），element-ui，vue-router
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值