ivue_动态路由导航、路由鉴权及不同平台显示不同页面

导航菜单

1、导航及路由

vue-ui 创建项目，添加ivue和vue-router插件

router.js 核心代码

import Vue from 'vue'
import Router from 'vue-router'

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      name: 'home',
      component: Home
    },
    {
      path: '/about',
      name: 'about',
      component: () => import(/* webpackChunkName: "about" */ './views/About.vue')
    }
  ]
})

App.vue,方式一：@on-select

<template>
  <div id="app">
    <div id="nav">
      <!--<router-link to="/">Home</router-link> |-->
      <!--<router-link to="/about">About</router-link>-->
      <!---->
      <Menu @on-select="handleSelect">
        <MenuItem name="home">Home</MenuItem>
        <MenuItem name="about">About</MenuItem>
      </Menu>

    </div>
    <router-view/>
  </div>
</template>

<script>
  export default {
    methods: {
      handleSelect(name){
          this.$router.push(name)
      }
    }
  }
</script>

ivue3.0方式二：to="/path"

<template>
  <div id="app">
    <div id="nav">
      <Menu>
        <MenuItem name="home" to="/home">Home</MenuItem>     
        // target="_blank"  <MenuItem name="about" to="/about" target="_blank">About</MenuItem>
        // replace 不保留历史记录
        // ctrl + 菜单，ivue3.0特性
        <MenuItem name="about" to="/about">About</MenuItem>
      </Menu>

    </div>
    <router-view/>
  </div>
</template>

<script>
  export default {

  }
</script>

ivue 动态路由菜单高亮,watch监听后，动态传递给activeName

<template>
  <div id="app">
    <div id="nav">
      <Menu :active-name="activeName">
        <MenuItem name="/home" to="/home">Home</MenuItem>
        <MenuItem name="/about" to="/about">About</MenuItem>
      </Menu>

    </div>
    <router-view/>
  </div>
</template>

<script>
  export default {

    data() {
      return {
        activeName:this.$route.path
      }
    },
    watch: {
      '$route' (){
        //console.log(this.$route.path);
        this.activeName = this.$route.path
      }
    },
  }
</script>

2、在路由级别对页面进行鉴权（路由守卫功能）

如果用户登录过，则跳转到主页面，否则跳转到登录页面，路由完成之前鉴权。
login.vue

<template>
    <div>这是登录页面
        <Button @click="handleLogin">登录</Button>
    </div>
</template>

<script>
    export default {
        props: {},
        data() {
           return{ };
        },
        mounted() {
        },
        methods: {
            handleLogin(){
            // 设置登录保存信息，用做模拟登录信息
                window.localStorage.setItem('login','1');
            }
        }

    }
</script>
<style scoped>
</style>

admin.vue

<template>
    <div>这是管理页面</div>
</template>

<script>
    export default {
        props: {},
        data() {
            return {};
        },
        mounted() {
        },
        methods: {}
    }
</script>

<style scoped>

</style>

router.js 添加登录路由

       {
            path: '/login',
            name: 'login',
            meta: {
                type: ''
            },
            component: () => import('./views/login.vue')
        },
        {
            path: "/admin",
            name: 'admin',
            // meta 用做路由授权的一些判别信息，在router.beforeEach中可以拿到该值
            meta: {
              type: 'login'
            },
            component: () => import('./views/admin.vue')
        }

main.js

import Vue from 'vue'
import App from './App.vue'
import './plugins/iview.js'
import router from './router'

Vue.config.productionTip = false

router.beforeEach((to, from, next) => {
    // to 可以访问到router.js配置的meta信息
    // console.log(to.meta.type);
    const type = to.meta.type;

    // 如果登录，则next,否则
    if (type === "login") {
        if (window.localStorage.getItem("login")) {
            next();
        } else {
            next('/login');
        }
    } else {
        next();
    }

})

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

3、根据不同的平台动态路由不同的组件

router.js

import Vue from 'vue'
import Router from 'vue-router'
import Home from './views/Home.vue'

Vue.use(Router)

const  ua = window.navigator.userAgent;
let isMobile = false;

if (ua.indexOf("iPhone")>=0) isMobile = true;
if (ua.indexOf("Android")>=0) isMobile = true;
if (ua.indexOf("iPad")>=0) isMobile = true;

// 移动端，则设置移动路由路径
const path = isMobile?'/mobile':'';

export default new Router({
    routes: [
     {
             path: '/login',
             name: 'login',
             meta: {
                 type: ''
             },
             // path 设置移动的路径
             component: () => import('./views'+path+'/login.vue')
         }
    ]
})

在相应的路径中新建移动的页面，即可根据不同的平台显示不同的页面。

github源码参考