导航守卫beforeEach

最新推荐文章于 2024-07-10 18:48:26 发布
文阳兄
最新推荐文章于 2024-07-10 18:48:26 发布
阅读量160
点赞数
文章标签： vue
本文链接：https://blog.csdn.net/LaoYangSaid/article/details/108093603
版权
beforeEach

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

<body>
    <div id="app">
        <router-view />
    </div>
    <script src="./vue.min.js"></script>
    <script src="./vue-router.js"></script>
    <script>
        //可以进的地方 家 公园 
        // 不可以进的地方 动物园 当没有买票进的话要买票入场 
        // 动物园里面包括老虎区 进入老虎区需要门票进入 没有门票拦截
        // meta可以包裹任意自定义信息 
        // 售票处有一个按钮进行买票 当点击买票 购买成功的话返回你自己停留的页面
        // 买票成功后记录在本地当中 进行系统读取 查看是否已经买票成功 如果有的话放行 没有的话重新买票
        const Home = {
            template: `
          <div>这是我家
          <router-link to="/park">公园</router-link>
          <router-link to="/zoo">动物园</router-link>
          <router-link to="/movie">电影院</router-link>
          <router-link to="/zoo/tiger">动物园的老虎区</router-link>
          </div>
          `
        }
        const Park = {
            template: `
            <div>公园</div>
            `
        }
        const Zoo = {
            template: `
            <div>动物园
                <router-view/>
                </div>
            `
        }
        const Ticket = {
            template: `
            <div>售票区
            <button @click="buy">买票</button>
                </div>
            `,
            methods: {
                buy() {
                    //让其买票成功后直接储存在本地当中
                    localStorage.setItem('ticket', true)
                    // 买完跳转为首页
                    // this.$router.push('/')
                    // 这个是获取要买票前的位置或者返回为首页
                    const a = this.$route.query.a || "/"
                    this.$router.push(a)
                }
            }
        }
        const Movie = {
            template: `
            <div>电影区</div>
            `
        }
        const Tiger = {
            template: `
            <div>老虎区</div>
            `
        }
        const routes = [
            {
                path: '/',//默认显示的页面
                component: Home
            },
            {
                path: '/park',
                component: Park
            },
            {
                path: '/zoo',
                component: Zoo,
                meta: {
                    // 定义meta包裹任意自定义元素
                    auto: true
                },
                children: [
                    {
                        path: '/zoo/tiger',
                        component: Tiger
                    }
                ]
            },
            {
                path: '/ticket',
                component: Ticket
            },
            {
                path: '/movie',
                component: Movie,
                meta: {
                    auto: true
                }
            }
        ]
        const router = new VueRouter({
            routes
        })
        // 全局前置守卫 对路由跳转进行拦截
        // 导航守卫有3个参数 
        // to：进入到哪个路由去
        // from：从哪个路由离开
        // next：(放行) 路由的控制参数，常用的有next(true)和next(false) 
        router.beforeEach((to, from, next) => {
            // if (to.path == '/zoo' || to.path == '/movie')  = = if (to.meta.auto) 都是当需要门票的时候进行拦截
            // console.log(to,from) 打印出 matched里面包含父及所有的一切 

            if (to.matched.some(route => route.meta.auto)) {
                //这样写的意思是当路由当中包含包裹自定义元素的时候 进行match拦截所有
                // some当匹配一些是true其他的全是TRUE 当一个父拦截里面的子也拦截不必重新搞meta 直接使用matched来进行搞
                //给每个要进行买票的后面包裹一个meta 使用判断语句进行控制参数


                //查看是否已经买票成功 如果有的话放行 没有的话重新买票
                if (localStorage.getItem('ticket')) {
                    next()
                }
                else {
                    // 这个是进入控制台显示进入的路由地址后面？是拼接自定义的参数
                    next('/ticket?a=' + to.path)
                    // next('/ticket')
                }
                }
             else {
                next()
            }
        })
        var vm = new Vue({
            el: '#app',
            router,
            data: {},
            methods: {}
        });
    </script>
</body>

</html>