programing

vue.material에서의 vue.modial2 라우팅

minecode 2022. 8. 11. 21:27
반응형

vue.material에서의 vue.modial2 라우팅

현재 vue.jsvue-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>

jsfiddle

다음과 같이 하면 더 쉽고 깨끗해집니다.

<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

반응형