반응형
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
반응형
'itsource' 카테고리의 다른 글
| Vuejs 3의 변수로 Vuex에 저장된 값을 전달하는 방법(Quasar 2) (0) | 2022.08.17 |
|---|---|
| 중첩된 데이터를 사용한 VueJ 입력 바인딩 (0) | 2022.08.17 |
| 신뢰 저장소 vs 키 저장소 - 키 도구를 사용하여 생성 (0) | 2022.08.17 |
| Vue2: 메모리 리크 (0) | 2022.08.17 |
| Vuex: Axios GET 요청에서 구성 요소 내부에 정의되지 않은 값이 반환됨 (0) | 2022.08.17 |