vue 设置没有页面权限时回到首页

在Vue.js中，如果你想要设置用户没有特定页面权限时返回到首页，你可以通过组件内的导航守卫（vue-router 的 `beforeEach` 或者 `asyncBeforeEnter`）来实现。首先确保已经安装并配置了vue-router。

1. 首先，在路由文件中，给每个需要权限控制的路由添加一个meta属性，定义一个名为`permission`的字段，例如：

{
  path: '/private-page',
  component: PrivateComponent,
  meta: { permission: 'admin' }
}

2. 然后在全局的导航守卫中检查用户的权限，如果没有权限，则重定向到首页（如`/`）：

import Vue from 'vue'
import Router from 'vue-router'

const router = new Router()

router.beforeEach((to, from, next) => {
  if (to.meta.permission && !getUserPermission(to.meta.permission)) {
    // 用户没有权限，跳转回首页
    next(`/`)
  } else {
    next() // 如果有权限，继续加载路由
  }
})

// 假设getUserPermission是一个获取用户当前权限的方法
function getUserPermission(permission) {
  // 这里模拟从服务器或本地存储获取用户权限的逻辑
  return localStorage.getItem('userPermission') === permission;
}

export default router

在这个例子中，如果`getUserPermission`返回false，说明用户没有访问`private-page`所需的权限，就会自动重定向到首页。记得在实际应用中替换`getUserPermission`为你实际的权限判断逻辑。