本文详细介绍了Vue.js中路由守卫的使用，包括全局守卫、独享守卫和组件内守卫，以及如何利用meta字段进行权限控制。同时，文章讲解了Vue整合Element-UI的两种方式，包括完整引入和按需引入，并提供了相关代码示例。
文章目录
Vue总结（四）
本博客参考：
1、路由守卫
- 作用：对路由进行权限控制，保护路由安全。
- 分类：全局守卫、独享守卫、组件内守卫
- 拓展
- 路由元信息（meta字段）：用来给每个路由添加自定义一些信息，一般用于验证登录等。
1.1 基本使用
-
全局守卫:
//全局前置守卫：初始化时执行、每次路由切换前执行 router.beforeEach((to,from,next)=> { console.log('beforeEach',to,from) if(to.meta.isAuth) { //判断当前路由是否需要进行权限控制 if(localStorage.getItem('school') === 'qinghua'){ //权限控制的具体规则 next() //放行 }else { alert('暂无权限查看') // next({name:'guanyu'}) } } else { next() //放行 } }) //全局后置守卫：初始化时执行、每次路由切换后执行 router.afterEach((to,from)=> { console.log('afterEach',to,from) if(to.meta.title) { document.title = to.meta.title //修改网页的title } else { document.title = 'vue_test' } }) -
独享守卫:
beforeEnter(to,from,next){ console.log('beforeEnter',to,from) if(to.meta.isAuth){ //判断当前路由是否需要进行权限控制 if(localStorage.getItem('school') === 'qinghua') { next() }else{ alert('暂无权限查看') // next({name:'guanyu'}) } }else{ next() } } -
组件内守卫：
//进入守卫：通过路由规则，进入该组件时被调用 beforeRouteEnter (to, from, next) { }, //离开守卫：通过路由规则，离开该组件时被调用 beforeRouteLeave (to, from, next) { }
总结：路由守卫的三个参数。
to：要前往的路由
from：来自于哪个路由
next：放行。
1.2 示例
1.2.1 全局守卫
新建：src/router/index.js
- 全局前置路由守卫
- 全局后置路由守卫
index.js
// 该文件专门用于创建整个应用的路由器
import VueRouter from 'vue-router'
//引入组件
import About from '../pages/About'
import Home from '../pages/Home'
import News from '../pages/News'
import Message from '../pages/Message'
import Detail from '../pages/Detail'
//创建并暴露一个路由器
const router = new VueRouter({
routes: [
{
name: 'guanyu',
path: '/about',
component: About,
meta: {title: '关于'}
},
{
name: 'zhuye',
path: '/home',
component: Home,
meta: {title: '主页'},
children: [
{
name: 'xinwen',
path: 'news',
component: News,
//自定义信息：isAuth:是否需要认证 title: 网页标题
meta: {isAuth: true, title: '新闻'}
},
{
name: 'xiaoxi',
path: 'message',
component: Message,
//自定义信息：isAuth:是否需要认证 title: 网页标题
meta: {isAuth: true, title: '消息'},
children: [
{
name: 'xiangqing',
path: 'detail',
component: Detail,
//自定义信息：isAuth:是否需要认证 title: 网页标题
meta: {isAuth: true, title: '详情'}, //（isAuth:true 表示要鉴权）
//props的第三种写法，值为函数
props($route) {
return {
id: $route.query.id,
title: $route.query.title,
a: 1,
b: 'hello'
}
}
}
]
}
]
}
]
});
//全局前置路由守卫————初始化的时候被调用、每次路由切换之前被调用（地址栏路径不变）
router.beforeEach((to, from, next) => {
console.log('前置路由守卫', to, from);
if (to.meta.isAuth) { //判断是否需要鉴权（true表示要鉴权）
if (localStorage.getItem('school') === 'qinghua') {
//放行
next()
} else {
alert('学校名不对，无权限查看！')
}
} else {
//放行
next()
}
})
//全局后置路由守卫————初始化的时候被调用、每次路由切换之后被调用
router.afterEach((to, from) => {
console.log('后置路由守卫', to, from)
//修改网页标题
document.title = to.meta.title || '后台管理系统'
})
export default router
1.2.2 独享路由守卫
新建：src/router/index.js
- 独享路由守卫只有前置，没有后置
- 作用
- 对某个路由或某些特定路由进行单独的权限控制
- 可以配合全局后置路由守卫使用
index.js
// 该文件专门用于创建整个应用的路由器
import VueRouter from 'vue-router'
//引入组件
import About from '../pages/About'
import Home from '../pages/Home'
import News from '../pages/News'
import Message from '../pages/Message'
import Detail from '../pages/Detail'
//创建并暴露一个路由器
const router = new VueRouter({
routes: [
{
name: 'guanyu',
path: '/about',
component: About,
meta: {title: '关于'}
},
{
name: 'zhuye',
path: '/home',
component: Home,
meta: {title: '主页'},
children: [
{
name: 'xinwen',
path: 'news',
component: News,
//自定义信息：isAuth:是否需要认证 title: 网页标题
meta: {isAuth: true, title: '新闻'},
//独享路由守卫
beforeEnter: (to, from, next) => {
console.log('独享路由守卫', to, from);
if (to.meta.isAuth) { //判断是否需要鉴权
if (localStorage.getItem('school') === 'qinghua') {
next()
} else {
alert('学校名不对，无权限查看！')
}
} else {
next()
}
}
},
{
name: 'xiaoxi',
path: 'message',
component: Message,
//自定义信息：isAuth:是否需要认证 title: 网页标题
meta: {isAuth: true, title: '消息'},
children: [
{
name: 'xiangqing',
path: 'detail',
component: Detail,
//自定义信息：isAuth:是否需要认证 title: 网页标题
meta: {isAuth: true, title: '详情'}, //（isAuth:true 表示要鉴权）
//props的第三种写法，值为函数
props($route) {
return {
id: $route.query.id,
title: $route.query.title,
a: 1,
b: 'hello'
}
}
}
]
}
]
}
]
});
//全局前置路由守卫————初始化的时候被调用、每次路由切换之前被调用（地址栏路径不变）
router.beforeEach((to, from, next) => {
console.log('前置路由守卫', to, from);
if (to.meta.isAuth) { //判断是否需要鉴权（true表示要鉴权）
if (localStorage.getItem('school') === 'qinghua') {
//放行
next()
} else {
alert('学校名不对，无权限查看！')
}
} else {
//放行
next()
}
})
//全局后置路由守卫————初始化的时候被调用、每次路由切换之后被调用
router.afterEach((to, from) => {
console.log('后置路由守卫', to, from)
//修改网页标题
document.title = to.meta.title || '后台管理系统'
})
export default router
1.2.3 组件内路由守卫
该路由守卫是写在组件里的！
beforeRouteEnter：
- 通过路由规则，进入该组件时被调用，直接在页面上写该组件标签不会被调用。
- 类似于全局前置守卫。
beforeRouteLeave：
- 通过路由规则，离开该组件时被调用。
- 和全局后置守卫不同，全局后置守卫是在进入该组件时会自动调用。
- 而beforeRouteLeave在离开该组件时才会被调用，进入该组件时并不会被调用。
About.vue
<template>
<h2>我是About的内容</h2>
</template>
<script>
export default {
name: 'About',
mounted() { },
//通过路由规则，进入该组件时被调用
beforeRouteEnter(to, from, next) {
console.log('About--beforeRouteEnter', to, from)
if (to.meta.isAuth) { //判断是否需要鉴权
if (localStorage.getItem('school') === 'atguigu') {
next()
} else {
alert('学校名不对，无权限查看！')
}
} else {
next()
}
},
//通过路由规则，离开该组件时被调用
beforeRouteLeave(to, from, next) {
console.log('About--beforeRouteLeave', to, from)
next()
}
}
</script>
2、VUE整合Element-UI
一般UI组件库从两个方面来说，首先看它是什么端的组件库，其次，看它是基于哪个框架的，还是说是对原生css的封装。
2.1 Vue UI 组价库
移动端常用 UI 组件库
-
Vant https://youzan.github.io/vant
-
Cube UI https://didi.github.io/cube-ui
-
Mint UI http://mint-ui.github.io
PC 端常用 UI 组件库
-
Element UI https://element.eleme.cn
-
IView UI https://www.iviewui.co
步骤
- 安装Element-UI依赖
- 在src/main.js中引入，并应用插件
- 使用：在组件的template标签内写Element-UI的代码
2.2 整合方式一
完整引入Element-UI（体积大），不推荐。
2.2.1 安装Element-UI依赖
npm i element-ui -S
2.2.2 引入并应用插件
src/main.js
main.js
//引入Vue
import Vue from 'vue'
//引入App
import App from './App.vue'
//完整引入
//引入ElementUI组件库
import ElementUI from 'element-ui';
//引入ElementUI全部样式
import 'element-ui/lib/theme-chalk/index.css';
//关闭Vue的生产提示
Vue.config.productionTip = false;
//应用ElementUI
Vue.use(ElementUI);
//创建vm
new Vue({
el: '#app',
render: h => h(App),
})
2.2.3 使用
App.vue
<template>
<div>
<button>原生的按钮</button>
<input type="text">
<el-row>
<el-button>默认按钮</el-button>
<el-button type="primary">主要按钮</el-button>
<el-button type="success">成功按钮</el-button>
<el-button type="info">信息按钮</el-button>
<el-button type="warning">警告按钮</el-button>
<el-button type="danger">危险按钮</el-button>
</el-row>
<el-date-picker
type="date"
placeholder="选择日期">
</el-date-picker>
<el-row>
<el-button icon="el-icon-search" circle></el-button>
<el-button type="primary" icon="el-icon-s-check" circle></el-button>
<el-button type="success" icon="el-icon-check" circle></el-button>
<el-button type="info" icon="el-icon-message" circle></el-button>
<el-button type="warning" icon="el-icon-star-off" circle></el-button>
<el-button type="danger" icon="el-icon-delete" circle></el-button>
</el-row>
</div>
</template>
<script>
export default {
name: 'App',
}
</script>
2.3 整合方式二
按需引入Element-UI（体积小），推荐。
用什么就引入什么，就注册什么。
2.3.1 安装需要的依赖
安装Element-UI：
npm i element-ui -S
安装 babel-plugin-component：
npm install babel-plugin-component -D
-D：表示该依赖是开发阶段的依赖，生产环境不会引入。
2.3.2 创建 babel.config.js 文件
在应用（项目）根路径创建
babel.config.js文件（按需引入所需），和vue.config.js文件平级。这是新版本的方式。
babel.config.js
module.exports = {
//预设包
presets: [
'@vue/cli-plugin-babel/preset', //用于解析Vue相关的js
["@babel/preset-env", {"modules": false}], //按需引入Element-UI相关
],
plugins: [
[
"component",
{
"libraryName": "element-ui",
"styleLibraryName": "theme-chalk"
}
]
]
}
2.3.3 引入并应用插件
src/main.js
main.js
//引入Vue
import Vue from 'vue'
//引入App
import App from './App.vue'
//按需引入
import {Button, Row, DatePicker} from 'element-ui';
//关闭Vue的生产提示
Vue.config.productionTip = false;
//应用ElementUI
//Vue.component('el-button', Button); //可以手动指定组件的名字
Vue.component(Button.name, Button); //Button.name默认采用的就是el-button
Vue.component(Row.name, Row);
Vue.component(DatePicker.name, DatePicker);
//创建vm
new Vue({
el: '#app',
render: h => h(App),
})
2.3.4 使用
App.vue
<template>
<div>
<button>原生的按钮</button>
<input type="text">
<el-row>
<el-button>默认按钮</el-button>
<el-button type="primary">主要按钮</el-button>
<el-button type="success">成功按钮</el-button>
<el-button type="info">信息按钮</el-button>
<el-button type="warning">警告按钮</el-button>
<el-button type="danger">危险按钮</el-button>
</el-row>
<el-date-picker
type="date"
placeholder="选择日期">
</el-date-picker>
<el-row>
<el-button icon="el-icon-search" circle></el-button>
<el-button type="primary" icon="el-icon-s-check" circle></el-button>
<el-button type="success" icon="el-icon-check" circle></el-button>
<el-button type="info" icon="el-icon-message" circle></el-button>
<el-button type="warning" icon="el-icon-star-off" circle></el-button>
<el-button type="danger" icon="el-icon-delete" circle></el-button>
</el-row>
</div>
</template>
<script>
export default {
name: 'App',
}
</script>
3、整合其他UI框架
一般看对应的UI框架的官方文档！
下面以整合BootStrap框架为例，它是对原生CSS的封装。
整合之前先去官网下载BootStrap相关依赖和初始化一个vue-cli项目。
参考：
1118
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
