# 路由独享守卫
路由独享守卫故名思议，就是当前的守卫只能给路由自己使用。如果说某个路由需要自己独特的功能。比如当前页面只能登录成功才可以访问，那么我们就要考虑如何拦截。
## 实现功能
在路由配置上直接定义`beforeEnter`守卫。这些守卫与全局前置守卫的方法参数是一样的。
```
const router = new VueRouter({
routes: [
{
path: '/foo',
component: Foo,
beforeEnter: (to, from, next) => {
// ...
}
}
]
})
```
## 实现登录拦截
实现的页面中用户登录后才可以访问。同样的我们也可以做其它操作。比如购物车页面，必须登录后才可以访问。
```
var login = true;
var router = new VueRouter({
routes: [
{path: '/home', components: {default: Home, tabbar: Tabbar}},
{path: '/cate', components: {default: Category, tabbar: Tabbar}},
{path: '/pingou', components: {default: Purchase, tabbar: Tabbar}},
{
path: '/cart',
components: {default: Cart, tabbar: Tabbar},
beforeEnter(to, from, next) {
if (login) {
next()
} else {
next('/home')
}
}
},
{path: '/user', components: {default: User, tabbar: Tabbar}},
{path: '/about', component: About},
{path: '*', component: Error404}
],
linkActiveClass: 'active',
linkExactActiveClass: 'exact-active'
});
export default router
```
## 有的同学会说为什么不在全局守卫添加这个功能？
加不加这个功能是由开发者决定的。我的想法是如果只有这个页面需要登录才可以访问，那么我就不必大费周章在全局守卫，对所有路由一个一个做对比，再做拦截。我只需要对当前组件添加拦截，这样简单方便，性能还好。
当然了，如果有许多页面都需要拦截，你可以对这些路由的`meta`项添加一个值。比如 `login:true` 如下图。
```
var login = true;
var router = new VueRouter({
routes: [
{path:'/',redirect:'/home'},
{path: '/home', components: {default: Home, tabbar: Tabbar,}},
{path: '/cate', components: {default: Category, tabbar: Tabbar}},
{path: '/pingou', components: {default: Purchase, tabbar: Tabbar}},
{
path: '/cart',
components: {default: Cart, tabbar: Tabbar},
meta: {
login: true
}
},
{path: '/user', components: {default: User, tabbar: Tabbar}},
{path: '/about', component: About},
{path: '*', component: Error404}
],
linkActiveClass: 'active',
linkExactActiveClass: 'exact-active'
});
router.beforeEach((to, from, next) => {
console.log(to.meta)
if (to.meta.login) {
if(login){
next()
}else{
next('/')
}
} else {
next()
}
})
```
