路由守卫

最新推荐文章于 2024-05-17 08:48:13 发布

weixin_30642305

最新推荐文章于 2024-05-17 08:48:13 发布

阅读量477

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/jockr/p/11278615.html

版权

<!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">
        <h3>
            <router-link to='./login'>登录</router-link>
            <router-link to='./index'>主页</router-link>
            <router-link to='./goodsCart'>购物车</router-link>
            <router-link to='./service'>服务</router-link>
            <router-link to='./home'>HOME</router-link>
        </h3>
        <router-view></router-view>
    </div>
    <script src="node_modules/vue/dist/vue.js"></script>
    <script src="./node_modules/vue-router/dist/vue-router.min.js"></script>
</body>
</html>
<script>
    ( () => {
        var isLogin = false
        const index = { template: `<h1>欢迎来到首页</h1> `} 
        const login = { template:
                        `<div>
                            <input type='text' id='userName' placeholder='请输入用户名' /><br/><br/>
                            <input type='password' id='userPass'  /><br/><br/>
                            <input type='button' id='btn'  value='登录'/><br/><br/>
                        </div>`
                    }
        const home = { template: `<h1>这是HOME页</h1>` }            
        const goodsCart = { template: `<h1>这是goodsCart页</h1>` }            
        const service = { template: `<h1>这是售后服务页</h1>` }            

        const routes = [
            { redirect:'login', path:'/' },
            { component: index, path: '/index', name: 'index' },
            { component: login, path: '/login', name: 'login' },
            { component: home, path: '/home', name: 'home' },
            { component: goodsCart, path: '/goodsCart', name: 'goodsCart' },
            { component: service, path: '/service', name: 'service' },
            { redirect:'*', path:'/login'}
        ]

        const router = new VueRouter({
            routes,
        })


        router.beforeEach( ( to,from,next) => {
            const nextRouter = ["index","home","goodsCart",'service']
            if(nextRouter.indexOf(to.name) >=0 ){
                if(!isLogin){
                    alert('请先登录')
                    return router.push({ name : "login"})
                }
            }
            if(to.name === 'login'){
                if (isLogin) {
                    router.push({ name: 'index' })
                }
            }
            next()
        })
        Vue.nextTick( () => {
            document.getElementById('btn').onclick = function (){
                if (document.getElementById('userName').value === '' && document.getElementById('userPass').value !== '') {
                    alert('请输入用户名')
                    return
                } else if (document.getElementById('userPass').value === '' && document.getElementById('userName').value !== '') {
                    alert('请输入密码')
                    return
                } else if (document.getElementById('userPass').value === '' && document.getElementById('userName').value === '') {
                    alert('请输入用户名和密码')
                    return
                }
                console.warn('[warn]','----')
                if(document.getElementById('userName').value === 'admin' && document.getElementById('userPass').value === '123456'){
                    isLogin = true
                    router.push({name:'index'})
                    setTimeout(() => {
                        isLogin = false
                    },6000);
                }
            }
        })
        localStorage.setItem('ligeng','xxxxxxxxxxxx')
        const VM = new Vue({
            el:'#app',
            router,
        })
    })()
</script>

转载于:https://www.cnblogs.com/jockr/p/11278615.html

weixin_30642305

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
路由守卫

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta htt...
复制链接

扫一扫