vue禁止输入地址栏直接访问页面

在Vue中，禁止通过地址栏直接访问页面可以通过以下两种方式实现：

1. 使用路由守卫：Vue Router提供了全局的路由守卫，可以在路由跳转之前进行拦截和控制访问权限。可以在路由配置中定义一个全局前置守卫，当用户尝试通过地址栏直接访问某个页面时，会被拦截并重定向到其他页面。例如，可以将所有需要禁止直接访问的页面重定向到登录页面。代码示例：

// main.js
import router from './router'

router.beforeEach((to, from, next) => {
  if (to.matched.some(record => record.meta.requiresAuth)) { // 需要鉴权的页面
    if (!isAuthenticated()) { // 判断用户是否已经登录
      next('/login') // 重定向到登录页面
    } else {
      next() // 放行
    }
  } else {
    next() // 不需要鉴权的页面直接放行
  }
})

2. HTML5 History模式：Vue Router默认使用的是hash模式，即路由路径前面会加上"#/"，这样可以避免通过地址栏直接访问页面的问题。如果想要进一步防止地址栏直接输入访问，可以使用HTML5 History模式，它会将路由路径以HTML5的history.pushState API进行管理，没有"#/"号。在router.js中进行配置：

// router.js
const router = new VueRouter({
  mode: 'history', // 开启history模式
  routes: [...]
})

需要注意的是，使用HTML5 History模式时需要后端进行配置，确保在后端路由匹配失败时返回同一个页面，以防止直接访问被拦截。