Question

我最近开始学习vuejs并使用firebase构建和应用程序进行身份验证。我安装了webpack主题并尝试删除链接上的默认主题标签后出现问题。当我插入mode:history后，在我登录我的hello页面后它没有重定向我。当我删除它一切正常。

我的index.js（在我的router文件夹下）：

Vue.use(Router)

const router = new Router({
  mode: 'history',
  routes: [
    {
      path: '*',
      redirect: '/login'
    },
    {
      path: '/',
      redirect: '/login'
    },
    {
      path: '/login',
      name: 'Login',
      component: Login
    },
    {
      path: '/sign-up',
      name: 'SignUp',
      component: SignUp
    },
    {
      path: '/hello',
      name: 'Hello',
      component: Hello,
      meta: {
        requiresAuth: true
      }
    }
  ]
})

router.beforeEach((to, from, next) => {
  let currentUser = firebase.auth().currentUser;
  let requiresAuth = to.matched.some(record => record.meta.requiresAuth);

  if (requiresAuth && !currentUser) next('login')
  else if (!requiresAuth && currentUser) next('hello')
  else next()
})

export default router

以下是我的登录按钮示例：

<button class="btn" type="submit" v-on:click="signIn">Log In</button>

我的组件脚本：

<script>
  import firebase from 'firebase'

  export default {
    name: 'login',
    data: function() {
      return {
        email: '',
        password: ''
      }
    },
    methods: {
      signIn: function() {
        firebase.auth().signInWithEmailAndPassword(this.email, this.password).then(
          (user) => {
            this.$router.replace('hello')
          },
          (err) => {
            alert('Oops. ' + err.message)
          }
        );
      }
    }
  }
</script>

这是否与v-on:click功能有关？

如果你还需要其他任何东西来解决我的问题，请告诉我。

Answer 1

案件很重要！

替换

this.$router.replace('hello')

与

this.$router.replace('Hello')

同时替换

next('login')

与

next('/login')

或

next('Login')

模式之后：'history'vue router无法正常工作

1 个答案: