vue2怎么实现未登录不能跳转主页面
时间: 2024-02-06 17:04:20 浏览: 20
在Vue2中,可以通过路由守卫(router guard)来实现未登录不能跳转主页面的功能。路由守卫分为全局守卫和路由独享守卫两种。
全局守卫会在每个路由切换时都被调用,可以在其中判断用户是否已登录。如果未登录,则可以跳转到登录页面。
路由独享守卫只会在某个具体路由被访问时被调用,可以用来限制某些页面的访问权限。
以下是一个简单的示例,展示如何使用全局守卫实现未登录不能跳转主页面的功能:
```javascript
// main.js
import Vue from 'vue'
import App from './App.vue'
import router from './router'
Vue.config.productionTip = false
router.beforeEach((to, from, next) => {
// 判断用户是否已登录
const isLogin = localStorage.getItem('token') ? true : false;
// 如果用户未登录且要访问的页面需要登录,则跳转到登录页面
if (!isLogin && to.meta.requireAuth) {
next('/login');
} else {
next();
}
});
new Vue({
router,
render: h => h(App),
}).$mount('#app')
```
在上面的代码中,我们通过 `router.beforeEach` 注册了一个全局前置守卫。在这个守卫中,我们判断用户是否已登录,如果未登录且要访问的页面需要登录,则跳转到登录页面;反之则直接进入要访问的页面。
接下来,在路由配置中,我们可以通过 `meta` 字段来标记哪些页面需要登录才能访问:
```javascript
// router.js
import Vue from 'vue'
import Router from 'vue-router'
import Home from './views/Home.vue'
import Login from './views/Login.vue'
Vue.use(Router)
export default new Router({
routes: [
{
path: '/',
name: 'home',
component: Home,
meta: {
requireAuth: true // 必须登录才能访问
}
},
{
path: '/login',
name: 'login',
component: Login
}
]
})
```