vue路由之导航守卫
1、全局守卫
- 应用场景
在浏览一些网站的时候我们会发现有些地方不登录是进不去的,像个人中心,我的订单,会直接跳转到登陆页。
so,怎么实现这个功能呢?
举个简单的小例子:
周末和家人一起开开心心去公园,突然想去动物园转一转,要知道动物园是需要买票的,走到门口检票员一看你没票,”不好意思先生,我们这需要买票才能进哦”,然后你就赶紧去买票,这样你才能进去。
全局守卫可以说是担任检票员的工作,跳转的工作只有你拥有凭证(票)之后才可以进行,不然的话只能老老实实去买票。先来完成上面这个案例:
...
<body>
<div id="app">
<router-view></router-view>
</div>
<script src="./vue.js"></script>
<script src="./vue-router.js"></script>
<script>
/*
/park
公园不需要门票
/zoo
动物园需要门票
/ticket
售票处
*/
//创建组件
const Park = {
template:`
<div>公园</div>
`
}
const Zoo = {
template:`
<div>动物园</div>
`
}
const Ticket = {
template:`
<div>售票处
<br>
<button @click = "getTicket">买票</button>
</div>
`,
methods:{
getTicket(){
//买票成功
sessionStorage.setItem('ticket',1)
//成功后跳转至来时的路由
const url = this.$route.query.backURL
this.$router.push(url ? url : '/')
}
}
}
const routes = [
{
name:'park',
path:'/park',
component:Park
},{
name:'zoo',
path:'/zoo',
component:Zoo,
meta:{auth:true}
},{
name:'ticket',
path:'/ticket',
component:Ticket
}
]
const router = new VueRouter({
routes //等同于routes:routes
})
const isHave = ()=>{
return sessionStorage.getItem('ticket')
}
//注册全局前置守卫
router.beforeEach((to,from,next) => {
if(to.matched.some((route) => route.meta.auth)){
isHave() ? next() : next({path:'/ticket',query: {backURL:to.fullPath}})
}else{
next()
}
})
const app = new Vue({
el:'#app',
router //等同于router:router
})
</script>
</body>
...
这样就完成了一个简单的全局守卫案例。
写一个简单的登录拦截案例
...
<body>
<div id="app">
<router-view></router-view>
</div>
<script src="./vue.js"></script>
<script src="./vue-router.js"></script>
<script>
const Index = {
template:`
<div>首页</div>
`
}
const Order = {
template:`
<div>订单</div>
`
}
const Profile = {
template:`
<div>个人中心
<router-view></router-view>
</div>
`
}
const Setting = {
template:`
<div>设置</div>
`
}
const login = {
template:`
<div>
<p><input type="text"></p>
<p><input type="text"></p>
<button @click = "login">登录</button>
</div>
`,
methods:{
login(){
sessionStorage.setItem('loged','1')
const path = this.$route.query.returnURL
this.$router.push({path:path ? path:'/'})
}
}
}
const routes = [
{
path:'/',
component:Index
},
{
path:'/login',
component:login
},
{
path:'/order',
component:Order,
meta:{auth:true}
},{
path:'/profile',
component:Profile,
meta:{auth:true},
children:[
{
path:'setting',
component:Setting
}
]
}
]
const isLoged = () => {
return sessionStorage.getItem('loged')
}
const router = new VueRouter({
routes,
})
router.beforeEach((to,from,next)=>{
if(to.matched.some(route => route.meta.auth)){
isLoged() ? next() : next({path:'/login', query:{returnURL:to.fullPath}})
}else{
next()
}
})
const app = new Vue({
el:'#app',
router
})
</script>
</body>
...
具体了解 : router.vuejs.org