itsource

after 모드: 'history' vue 라우터가 작동하지 않음

mycopycode 2022. 8. 17. 23:58
반응형

after 모드: 'history' vue 라우터가 작동하지 않음

최근에 vuej를 배우기 시작했고, 인증을 위한 Firebase를 사용한 빌드 및 앱도 배웠습니다.웹 팩 테마를 설치하고 링크에 있는 기본 해시태그를 삭제하려고 한 후 문제가 발생했습니다.삽입할 때mode:historyhello 페이지에 로그인해도 리다이렉트 되지 않습니다.떼어내면, 모든 것이 정상적으로 동작합니다.

my index.js(my 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기능합니까?

제 문제를 해결하기 위해 더 필요한 것이 있으면 알려주세요.

케이스가 중요해요!

교체하다

this.$router.replace('hello')

와 함께

this.$router.replace('Hello')

교환도 합니다.

next('login')

와 함께

next('/login')

또는

next('Login')

언급URL : https://stackoverflow.com/questions/46102445/after-mode-history-vue-router-doesnt-work

반응형