组件内路由
beforeRouteEnter(to,from,next){
if(localStorage.getItem("token")){next()}
else{next("/login?redirect=/ball")}
},
全局路由
在router文件夹的index.js中使用例子
router.beforeEach((to,from,next)=>{
let auth = to.meta.auth;
let user = JSON.parse(sessionStorage.getItem("user")) || {};
if (auth <= -1 || auth === undefined) {
next();
} else {
if (user.M_ID && user !== {}) {
if (user.M_Rank >= auth) {
next();
} else {
alert("权限不足");
next("/user");
}
} else {
next("/login?redirect=" + to.path);
}
}
独享路由–显示隐藏底部栏
路由文件创建utils文件夹 Bus.js
import Vue from 'vue';
export default new Vue();
import Bus from '@/utils/Bus.js'
{
path:"/produce/:id",
component:Produce,
name:"Produce",
beforeEnter(to,from,next){Bus.$emit("showtabs",false);next()}
},
<template>
<div id="app">
<router-view class="page"></router-view>
<div class="tabs" v-if="isshow">
<router-link to="/" class="col">首页</router-link>
<router-link to="/category" class="col">分类</router-link>
<router-link to="/ball" class="col">星球</router-link>
<router-link to="/cart" class="col">购物车</router-link>
<router-link to="/user" class="col">我的</router-link>
</div>
</div>
</template>
<script>
import Bus from '@/utils/Bus.js'
export default{
data(){
return{
isshow:true
}
},
created(){
Bus.$on("showtabs",$event=>{this.isshow=$event})
}
}
</script>
<style>
*{margin: 0;padding: 0;}
#app{ width: 100%; height: 100vh; display: flex; flex-direction: column;}
.page{flex:1}
.tabs{ height: 49px; display: flex; background-color: #f0f0f0;}
.col{flex:1; text-align: center; line-height: 49px;}
</style>
Processed:
0.010, SQL:
9
