路由守卫
<!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>
优质内容筛选与推荐>>
1、续写逻辑类型
2、MYSQL复习笔记4-基本SQL语句
3、Asp.Net中的脚本回调和Server.Transfer页面传值
4、耦合
5、mac OSX 上 brew install hive