반응형
vue.material에서의 vue.modial2 라우팅
현재 vue.js와 vue-material을 사용하는 웹 페이지를 만들고 있습니다.저도 비슷한 메뉴를 만들었어요.
내 목표는 메뉴 항목 중 하나가 사용자를 다른 페이지로 리디렉션하는 것입니다.공식 의사 선생님 말씀대로 해 봤어요
<md-list-item @click="$refs.sidebar.toggle(); this.$router.push('/company');">
<md-icon>start</md-icon> <span>Starred</span>
</md-list-item>
하지만 경고 메시지를 받았어요
[Vue warn]: Error in event handler for "click": "TypeError: this.$router is undefined"
모든 버전을 사용해 보았습니다.$router.push('/company');
,router.push('/company');
,this.router.push('/company');
하지만 아직 작동되지 않습니다.
다른 한편으로, 나는 그 주변을 둘러보려 했다.md-list-item
와 함께router-link
태그 붙이기는 했는데도 잘 안 되더라고요.
루팅을 인라인으로 정의하려면 어떻게 해야 하나요?@click
섹션)을 참조하십시오.
미리 답변을 주세요!
갱신:
나의vue-route
로 설정하다app.js
:
import VueRouter from 'vue-router'
Vue.use(VueRouter)
...
const routes = [];
const router = new VueRouter({
routes
})
const app = new Vue({
el: '#app',
beforeUpdate: function() {
console.debug('app rerendering');
console.debug(this);
},
beforeCreate: function() {
console.debug('app creating');
console.debug(this);
},
router,
});
하지만 문제는 똑같아내가 이걸 부르려고 하면.$router.push('/company')
같은 에러가 발생했습니다.TypeError: this.$router is undefined
라우터 설정은 정상인 것 같습니다.여기서의 문제는this.
당신의 안에서@click
, (이미 사용하고 있는 경우)는 불필요합니다.$refs
없이.this
:P)
<md-list-item @click="$refs.sidebar.toggle(); $router.push('/company');">
<md-icon>start</md-icon>
<span>Starred</span>
</md-list-item>
다음과 같이 하면 더 쉽고 깨끗해집니다.
<md-list-item to="/company">
<md-icon>start</md-icon>
<span>Starred</span>
</md-list-item>
언급URL : https://stackoverflow.com/questions/45945593/vue-js-2-routing-in-vue-material
반응형
'programing' 카테고리의 다른 글
bootstrap-vue 테이블에 대한 세부 정보 표시 문제 (0) | 2022.08.11 |
---|---|
타입 세이프 에넘을 작성하는 방법 (0) | 2022.08.11 |
메모리가 정렬되어 있는지 확인하는 방법 (0) | 2022.08.11 |
Base64 Java 인코딩 및 문자열 디코딩 (0) | 2022.08.11 |
이중이 정수인지 검사하는 방법 (0) | 2022.08.11 |