Iview实例

1、Menu菜单实例

(1)实例1 (用API里事件,稍许复杂)

//跳转查找name属性,再寻找跳转路径
<template>
  <div id="app">
    <div id="nav">
      <Menu mode="horizontal" @on-select="buildJump">
        <MenuItem name="Home">Home</MenuItem>
        <MenuItem name="About">About</MenuItem>
      </Menu>
    </div>
    <router-view />
  </div>
</template>
<script>
  export default {
    methods: {
      buildJump (name) {
        this.$router.push(name)
      }
    }
  }
</script>

(2)实例2 (简便)

//直接寻找跳转路径
<template>
  <div id="app">
    <div id="nav">
      <Menu mode="horizontal">
        <MenuItem to="/">Home</MenuItem>
        <MenuItem to="/about">About</MenuItem>
      </Menu>
    </div>
    <router-view />
  </div>
</template>

(3)菜单栏自动选中当前功能名 (实例)

//MenuItem里的"to"、"name"属性值要一致
<template>
  <div id="app">
    <div id="nav">
      <Menu mode="horizontal" :active-name="activeName">
        <MenuItem to="/" name="/" replace>Home</MenuItem>
        <MenuItem to="/about" name="/about" replace>About</MenuItem>
      </Menu>
    </div>
    <router-view />
  </div>
</template>
<script>
  export default {
    data () {
      return {
        activeName: this.$route.path
      }
    },
    watch: {
      '$route' () {
        console.log(this.$route)
        this.activeName = this.$route.path
      }
    }
  }
</script>

2、验证是否为登录状态(案例)

第一步 在需要存储token的页面绑定事件写入或释放token

<template>
  <div>
    <Button @click="loginsave">登录</Button>
    <Button @click="loginuset">退出</Button>
  </div>
</template>

<script>
  export default {
    name: 'login',
    methods: {
      loginsave () {
        window.localStorage.setItem('login', 1)
      },
      loginuset () {
        window.localStorage.setItem('login', '')
      }
    }
  }
</script>

第二步 路由文件添加存储token的属性及值

//案例
const routes = [
  {
    path: '/login',
    name: 'Login',
    //定义属性
    meta: {
    //定义属性和属性值
      type: ''
    },
    component: () => import('../views/Login.vue')
  },
  {
    path: '/Admin',
    name: 'Admin',
    //定义属性
    meta: {
    //定义属性和属性值
      type: 'login'
    },
    component: () => import('../views/Admin.vue')
  }
]

第三步 添加判断并导向需跳转的路径(可在路由js里写也可在ivew.js里写)

//注意,不管写到那个二者文件中的任意皆要引用router 的 JS文件
router.beforeEach((to, from, next) => {
  const type = to.meta.type
  if (type === 'login') {
    if (window.localStorage.getItem('login')) {
    //导线下一个页面
      next()
    } else {
    //导回登录页面
      next('/login')
    }
  } else {
    next()
  }
})

3、根据不同客户端加载不同页面

 在路由JS文件里写代码
 话不多说直接上案例

//获取客户端类型
const ua = window.navigator.userAgent
let isMobile = false
if (ua.indexOf('iPhone') >= 0) isMobile = true
if (ua.indexOf('iPad') >= 0) isMobile = true
if (ua.indexOf('Android') >= 0) isMobile = true
//判断类型
const path = isMobile ? '/mobile' : ''

const routes = [
  {
    path: '/login',
    name: 'Login',
    meta: {
      type: ''
    },
    //自动切换加载路径
    component: () => import('../views' + path + '/Login.vue')
  }
]