一.IView组件项目目录结构
iview-ui一套基于vue.js的前端组件库，iview中定制了一些自己组件的样式以及组件标签的书写规范，是一套非常流行的前端组件
1.1 基于iview创建的项目
基于ivew创建的项目和我们通过webpack创建的项目区别在于会新增plugins插件目录，而且下面会新建一个iview.js的js文件，其中就是用来对iview进行实例和引入
import Vue from 'vue'
import ViewUI from 'view-design'
Vue.use(ViewUI, {
transfer:true, //将标签元素的浮层放置到body下，脱离其挂在的app标签，这样可以有效的解决元素显示层级问题
size: 'large',
})
// import 'view-design/dist/styles/iview.css'
import '../custom.less';
注意点：iview3.x版本中导入方式为import iview from ‘./iview’
iview 4.x版本中为 import ViewUI from ‘./view-design’，iview已更名为view-design
1.2 iview主题和语言
import ‘…/custom.less’;例如自定义custom.less文件，iview的颜色是基于less方式进行开发的，例如custom.less中重写primary-color的样式
@import '~view-design/src/styles/index.less'; //引入全局配置
@primary-color: #8c0776; // 重写primary属性color，后面带有primary属性的class类组件颜色都是紫色（#8c0776）
语言
import Vue from 'vue'
import App from './App.vue'
import './plugins/iview.js'
import VueI18n from 'vue-i18n'
import en from 'view-design/dist/locale/en-US'
import zh from 'view-design/dist/locale/zh-CN'
import Router from './router.js'
Vue.config.productionTip = false
Router.beforeEach((to, from, next) => {
const meta_type = to.meta.type;
console.log(meta_type)
if(meta_type === 'login'){
if(window.localStorage.getItem('login')){
next();
}else{
next('/login');
}
}else{
next()
}
})
Vue.use(VueI18n)
Vue.locale = () => {
}
const messages ={
en: Object.assign({
message: '英文'}, en),
zh: Object.assign({
message: '中文'}, zh),
}
const i18n = new VueI18n({
locale: 'zh',
messages: messages
})
new Vue({
render: h => h(App),
i18n: i18n,
router: Router
}).$mount('#app')
语言的切换需要加载vue-i18n这个组件，然后在Vue对象中加载VueI18n，然后实例化VueI18n对象并修改iview中en,zh等语言配置
1.3 iview路由
iview中路由通过Menu实现，Menu 有四个关联的组件，分别为：Menu、MenuItem、SubMenu、MenuGroup，具体实现方式如下：
<template>
<div>
<!-- <span>
<router-link to='/'>Home</router-link> |
<router-link to="/about">About</router-link>
</span> -->
<div id="nav">
<Menu :active-name="activeName">
<MenuItem name="/home" to="/home" style="color: red;">Home</MenuItem>
<MenuItem name="/about" to="/about">About</MenuItem>
<MenuItem name="/login" to="/login">Login</MenuItem>
<MenuItem name="/admin" to="/admin">Admin</MenuItem>
</Menu>
</div>
<router-view></router-view>
</div>
</template>s
<script>
export default {
name: 'app',
data(){
return {
activeName: this.$route.path
}
},
methods:{
},
watch: {
'$route' () {
this.activeName=this.$route.path;
console.log(this.activeName);
}
}
}
</script>
<style scoped>
</style>
然后全局路由配置如下：
import Vue from 'vue'
import Router from 'vue-router'
const Home = () => import('./views/Home.vue')
Vue.use(Router)
export default new Router({
routes:[
{
path: '/home',
name: 'home',
component: Home
},
{
path: '/about',
name: 'about',
component: () => import('./views/About.vue')
},
{
path: '/admin',
name: 'admin',
component: () => import('./views/admin.vue'),
meta:{
type: 'login'
}
},
{
path: '/login',
name: 'login',
component: () => import('./views/login.vue'),
}
]
})
其中() => import(xx)，通过箭头函数动态加载
1.4 路由鉴权
{
path: '/admin',
name: 'admin',
component: () => import('./views/admin.vue'),
meta:{
type: 'login'
}
},
{
path: '/login',
name: 'login',
component: () => import('./views/login.vue'),
}
通过meta属性来配置登录需要鉴权的内容，然后可以通过导航守卫的方式rputer.beforeEach((to, from, next)) =>{})来进行校验
mport Router from './router.js'
Vue.config.productionTip = false
Router.beforeEach((to, from, next) => {
const meta_type = to.meta.type;
console.log(meta_type)
if(meta_type === 'login'){
if(window.localStorage.getItem('login')){
next();
}else{
next('/login');
}
}else{
next()
}
})
首先导入我们定义的全局路由对象Router，然后通过导航守卫，即调用Router.beforeEach来判断路由跳转之前的权限校验
转载：https://blog.csdn.net/qq_42707967/article/details/117397318
查看评论