30_路由守卫

30_路由守卫

01_前置路由守卫

//该文件专门用于创建整个应用的路由器
import VueRouter from "vue-router";
//引入组件
import About from "../components/About";
import Home from "../components/Home";
import News from "../pages/News";
import Message from "../pages/Message";
import Detail from "../pages/Detail";

const router= new VueRouter({
  routes: [
    {
      name: "guanyu",
      path: "/about",
      component: About,
    },
    {
      path: "/home",
      component: Home,
      children: [
        {
          name: "xinwen",
          path: "news",
          component: News,
        },
        {
          name:'xiaoxi',
          path: "message",
          component: Message,
          meta:{isAuth:true},
          children: [
            {
              path: "detail",
              component: Detail,
              },
            },
          ],
        },
      ],
    },
  ],

});

//全局前置路由守卫----初始化的时候被调用、每次路由切换之前被调用
router.beforeEach((to,from,next)=>{
  // if(to.name === 'xinwen' || to.name==='xiaoxi')
  //  if(to.path === '/home/news' || to.path==='/home/message')
  // {
  //     alert("你没权限")
  // }else{
  //   next()
  // }

  if(to.meta.isAuth){
    alert("你没权限")
  }else{
    next()
  }
  
})


export default router

02_后置路由守卫

//该文件专门用于创建整个应用的路由器
import VueRouter from "vue-router";
//引入组件
import About from "../components/About";
import Home from "../components/Home";
import News from "../pages/News";
import Message from "../pages/Message";
import Detail from "../pages/Detail";
//创建并暴露一个路由器
const router= new VueRouter({
    routes: [
        {
            name: "guanyu",
            path: "/about",
            component: About,
            meta:{title:'关于'},
        },
        {
            path: "/home",
            component: Home,
            meta:{title:'主页'},
            children: [
                {
                    name: "xinwen",
                    path: "news",
                    component: News,
                    meta:{title:'新闻'},
                },
                {
                    name:'xiaoxi',
                    path: "message",
                    component: Message,
                    meta:{isAuth:false,title:'消息'},
                    children: [
                        {
                            path: "detail",
                            component: Detail,
                        },
                        },
                    ],
                },
            ],
        },
    ],

});
//全局前置路由守卫----初始化的时候被调用、每次路由切换之前被调用
router.beforeEach((to,from,next)=>{

  if(to.meta.isAuth){
    alert("你没权限")
  }else{
    next()
  }
})

//后置路由守卫
router.afterEach((to,from)=>{
    document.title=to.meta.title || '一个系统'  //修改网页的title
})

export default router

03_独享路由守卫

//该文件专门用于创建整个应用的路由器
import VueRouter from "vue-router";
//引入组件
import About from "../components/About";
import Home from "../components/Home";
import News from "../pages/News";
import Message from "../pages/Message";
import Detail from "../pages/Detail";
//创建并暴露一个路由器
const router = new VueRouter({
  routes: [
    {
      name: "guanyu",
      path: "/about",
      component: About,
      meta: { title: "关于" },
    },
    {
      path: "/home",
      component: Home,
      meta: { title: "主页" },
      children: [
        {
          name: "xinwen",
          path: "news",
          component: News,
          meta: {isAuth:true, title: "新闻" },
          //独享守卫
          beforeEnter: (to, from, next) => {
          if(to.meta.isAuth){
            if(localStorage.getItem('school')==='atguigu'){
                next();
            }else{
              alert('权限不够')
            }
          }else{
            next()
          }
          },
        },
        {
          name: "xiaoxi",
          path: "message",
          component: Message,
          meta: { isAuth: false, title: "消息" },
          children: [
            {
              path: "detail",
              component: Detail,
              },
            },
          ],
        },
      ],
    },
  ],
});

//后置路由守卫
router.afterEach((to, from) => {
  document.title = to.meta.title || "一个系统"; //修改网页的title
});

export default router;

04_组件内路由守卫

代码演示

<template>
    <h2>我是About内容</h2>
</template>

<script>
    export default {
        name: "About",

        //通过路由规则，进入该组件时被调用
        beforeRouteEnter(to, from, next) {
            if (to.meta.isAuth) {
                if (localStorage.getItem("school") === "atguigu") {
                    console.log("你已经看见了内容了")
                    next();
                } else {
                    alert("权限不够");
                }
            } else {
                next();
            }
        },
        //通过路由规则，离开该组件时被调用
        beforeRouteLeave(to, from, next){
            console.log("我走了");
            next();
        }
    };
</script>