Question

'/'路径（组件入口点）提供了入口点（登录和注销）。授权用户被重定向到'/home'页面（组件主页）。

现在我想处理（仅限授权用户）'/'路径，就好像它是'/home'路径一样。这意味着如果我输入localhost:/或localhost:/home，则不会有任何差异或404页面，路由器会将我重定向到'/'。此外，每个非公共路由器路径都将被处理为404（组件NotFoundComponent ）。

但如果我是未经授权的用户，则每条可行的路径都会将我重定向到入口点'/'（组件入口点）。

如何使用Vuejs /路由器达到此目的？

Answer 1

您可以使用vue-router的beforeEach导航防护。（Reference）

在你的main.js中（在初始化vue组件之后）你需要写。

router.beforeEach((to, from, next) => {
  // If user is authorized
  if isAuthorized() {
    if (to.path === '/') {
      next()
    } else if (to.path === '/path') {
      next('/')
    } else {
      next()
    }
  } else {
      next('/')
  }
  next()
}

对于每个非常见路线，您可以添加

{path: '*', component: PageNotFound, name: 'PageNotFound'}

在您的路线中。

授权Vuejs后，相同的路由不同的组件

1 个答案: