vue路由三种方式

组件内路由

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")) || {};

    // console.log(user, auth);
    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';
// 导入vue
export default new Vue();
// 导出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>
  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值