vue.js this. $ router undefined

Question

vue.js this. $ router undefined

2

Я получаю неопределенный за

это. $ маршрутизатор

не определено в App.vue и других компонентах. Я не мог найти решение.

здесь часть моего main.js

Vue.use(VueRouter);
Vue.use(VueResource);

const router = new VueRouter({
    routes: Routes,
    mode: 'history'
});

new Vue({
    el: '#app',
    render: h => h(App),
    router
});

и вот мой router.js, который я импортирую в main.js.

export default [
    {path: '/', component: Home, name: 'home'},
    {path: '/home', component: Home, name: 'home2'},
    {path: '/user/login', component: Login, name: 'userLogin'}
];

Спасибо :)

редактировать

Я использовал это в тегах сценария, как это,

<script>
    import HeadNavBar from './components/HeadNavBar.vue';
    import SideBarNav from './components/SideBarNav.vue';
    import Home from './components/Home.vue';


    console.log(this.$router,pus); //the undefined type

    export default {
        name: 'app',
        data() {
            return {
                isLogin: true
            }
        },
        components: {
            'app-headnav': HeadNavBar,
            'app-sidebarnav': SideBarNav,
            'app-home': Home
        }

    }
</script>

но когда я переместил его в раздел методов, я получил ответ, который хотел.

export default {
    name: 'app',
    data() {
        return {
            isLogin: true
        }
    },
    components: {
        'app-headnav': HeadNavBar,
        'app-sidebarnav': SideBarNav,
        'app-home': Home
    },methods: {
        myFunc: function() {
            console.log(this.$router,pus); // this gave result
        }
    }
}

sudo 28 окт. 2017, в 00:36

Источник

0

Возможно, проблема заключается в вашем использовании this (возможно, вы используете функцию стрелки). Пожалуйста, обновите вопрос, чтобы показать больше контекста, чтобы помочь устранить проблему.
tony19 27 окт. 2017, в 22:06
0

спасибо :) я использовал его в тегах сценария в компоненте, как кодирование обычного JS. Но когда я использовал метод, я получил реакцию, которую я должен был иметь.
sudo 27 окт. 2017, в 22:27

Теги:

javascript

vue.js

vue-router

vuejs2

4 ответа

Ещё вопросы

Возможно, проблема заключается в вашем использовании this (возможно, вы используете функцию стрелки). Пожалуйста, обновите вопрос, чтобы показать больше контекста, чтобы помочь устранить проблему.
спасибо :) я использовал его в тегах сценария в компоненте, как кодирование обычного JS. Но когда я использовал метод, я получил реакцию, которую я должен был иметь.

tony19 · Answer 1 · 2017-10-27T20-10-00.000Z

Я могу воспроизвести только undefined ошибку для this.$router при использовании функции со стрелкой (возможно, то, что вы делаете), которую рекомендует документация Vue:

Не используйте функции стрелок в свойстве опций или в created:() => console.log(this.a), например, created:() => console.log(this.a) или vm.$watch('a', newValue => this.myMethod()). Поскольку функции стрелок связаны с родительским контекстом, this не будет экземпляр Vue, как вы ожидаете, что часто приводит к ошибкам, таким как Uncaught TypeError: Cannot read property of undefined или Uncaught TypeError: this.myMethod is not a function.

Вот пример mounted обратного вызова, который успешно регистрирует this.$router:

<script>
  export default {
    name: 'app',

    // DON'T USE ARROW FUNCTIONS HERE
    // mounted: () => {
    //   console.log({router: this.$router});
    // },

    mounted() {
      console.log({router: this.$router});
    }
  }
</script>

DRL · Answer 2 · 2017-10-27T23-13-00.000Z

console.log(this.$router,pus) над export выполняется при импорте компонента. Это произошло до того, как компонент был создан. Так this просто пустой объект {}.

Вы должны получить this.$router внутри методов объекта экспорта.

Arian saputra · Answer 3 · 2018-10-01T16-15-00.000Z

мы имеем такую же ошибку, в этом случае я исправил это, я просто импортирую файлы маршрутизатора в свой компонент, как это, и он работает:

импортировать файлы/конфигурации маршрутизатора в моем компоненте:

import router from '../router'

и я могу использовать это следующим образом:

router.replace('home')

и это должно работать

мой полный код:

<script>
import router from '../router'
export default {
  methods: {
  signIn: function () {
    firebase
    .auth().signInWithEmailAndPassword(this.email, this.password).then(
      function (user) {
        router.replace('home')
      },
      function (err) {
        alert('Maaf, ' + err.message)
      }
    )
  }
 }
}
</script>

Могу ли я узнать подробности файла ../router
@ - Ариан сапутра, пожалуйста, добавьте код route.js
Вы можете проверить в моей сути , gist.github.com/Rhyanz46/9b5c06ccf024db09b771c364e669b169

Jason Ulwelling · Answer 4 · 2018-07-05T14-45-00.000Z

Я знаю, что это старо, но я собираюсь поделиться чем-то, с чем столкнулся, и как я обойду его, если кто-то изо всех сил пытается там.

Мой сценарий - проект vue/meteor.

В функциях/обработчиках "this" относится к целевой функции, поэтому это. $ Router ищет $ router внутри функции или самой цели.

    ///////DOESN'T WORK ///////////
  mounted: function () {
    $(document).on('click', '.element', function(){
             //this is recognized as 
             this.$router.push(PATH)
        });
  },


    ////////THIS WORKS//////////
  mounted: function () { 
    //make router defined outside of function.
    var navigate = this.$router;

     $(document).on('click', '.element', function(){
        navigate.push(PATH)
     });
  }