路由守卫

我用阿里云盘分享了「10-25Vue学习.jpg」，你可以不限速下载🚀 复制这段内容打开「阿里云盘」App 即可获取 链接：https://www.aliyundrive.com/s/2j4eRAVRkut

Navigation.vue

<template>
  <div class="title">
      <div class="navigation">
          <ul>
                <li>
                    <router-link to="">爱奇艺</router-link>
                </li>
           </ul>
      </div>
      <router-view></router-view>
    </div>
</template>

<script>
export default {
    name:'Navigation',
    data(){
        return{
            naviList:[
                {"name":"爱奇艺","jump":"/aiqiyi"},
                {"name":"电视剧","jump":"/dianshiju"},
                {"name":"电影","jump":"/dianying"},
                {"name":"综艺","jump":"/zongyi"},
                {"name":"动漫","jump":"/dongman"}
            ]
        }
    }
}
</script>

<style scoped>
    .navigation{
        width: 100%;
        height: 88px;
        background-color: #fff;
        margin: 0 auto;
    }
    ul{
        list-style: none;
    }
    li{
        float: left;
        margin-left: 20px;
        line-height: 88px;
    }
</style>

路由配置

//该文件专门用来创建和管理整个应用的路由器
import VueRouter from "vue-router"
import Aiqiyi from "../pages/Aiqiyi"
import Dianshiju from "../pages/Dianshiju"
import Dongman from "../pages/Dongman"
import Zongyi from "../pages/Zongyi"
import Dianying from "../pages/Dianying"

//创建并暴露一个路由器
const router = new VueRouter({
    //地址和组件的对应关系
    routes:[
        {
            path:'/',//默认路由
            component:Aiqiyi
        },
        {
            path:'/aiqiyi',
            component:Aiqiyi
        },
        {
            path:'/dianshiju',
            component:Dianshiju
        },
        {
            path:'/dianying',
            component:Dianying
        },
        {
            path:'/zongyi',
            component:Zongyi
        },
        {
            path:'/dongman',
            component:Dongman
        }
    ]
})

//路由守卫 在每个路由之前
//to 到哪去
//from 由哪来
//next 是否放行
router.beforeEach((to, from, next) => {
    if(to.path ==="/dianying"){//判断是否是要去看电影
        //判断是否是vip 在application(应用)可以配置
        if(localStorage.getItem('vip') === "true"){
            next();
        }else{
            alert("穷逼");
        }
    }else{
        next();//放行
    }
})

//暴露路由
export default router;