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>