版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/qq3399013670/article/details/89787333
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')
}
]
})
在相应的路径中新建移动的页面,即可根据不同的平台显示不同的页面。