It is not possible to make this.$router.navigate, gives an error

Questions
1

It is not possible to make the transition, gives an error! The bottom line is that I enter the number for registration, should go to the confirmation page of the code (confirm.vue in routs registered), but when I press the continue button the error which is lower is issued.

If you go straight to href= " /confirm/" then everything works
The back function works, but the router does not(

"framework7": "^1.7.1",
"framework7-vue": "^0.9.4",

help please

error

TypeError: this.$router.navigate is not a function
at VueComponent.signIn (Auth.vue?c5ea:51)
at invokeWithErrorHandling (vue.esm.js?65d7:1863)
at VueComponent.invoker (vue.esm.js?65d7:2188)
at invokeWithErrorHandling (vue.esm.js?65d7:1863)
at VueComponent.Vue.$emit (vue.esm.js?65d7:3897)
at VueComponent.onClick (framework7-vue.min.js?e05a:15)
at invokeWithErrorHandling (vue.esm.js?65d7:1863)
at HTMLAnchorElement.invoker (vue.esm.js?65d7:2188)
at HTMLAnchorElement.original._wrapper (vue.esm.js?65d7:7565)

Auth.vue

<template>
  <f7-page no-toolbar no-navbar no-swipeback login-screen v-if="isSocketConnected" name="auth">
    <f7-login-screen-title>Авторизация</f7-login-screen-title>
    <f7-list form>
      <f7-input
        label="Введите номер телефона"
        type="text"
        placeholder="Ваш номер"
        :value="phone"
        v-model="phone"
      ></f7-input>
    </f7-list>
    <f7-list>
      <f7-list-button @click="signIn">Продолжить</f7-list-button>
    </f7-list>
  </f7-page>
</template>

<script>
  import { mapGetters } from 'vuex'

  export default {
    computed: {
      ...mapGetters([
       'isSocketConnected',
       'phone',
       'pin',
       'user'
     ])
    },
    data() {
      return {
        phone: '',
        pin: ''
      };
    },
    methods: {
      signIn () {
        if (this.isValid(this.phone) === false){
          this.$f7.alert('Некорректный номер телефона. Уберите лишние знаки, проверьте номер.', 'Tick')
        } else {
          // Парсим номер
          const phone = this.phone.replace(/\D/g, "") + ''
          // генерируем код
          const gpc = require('generate-pincode')
          let pin_code = gpc(4)
          // Сохраняем
          this.$store.state.phone = phone
          this.$store.state.pin = pin_code
          // Переходим на страницу подтверждения
          this.$router.navigate('/confirm/')
        }
      },
      isValid (p) {
        const digits = p.replace(/\D/g, "")
        return digits.length === 11 ? true : false
        console.log(digits)
      },
    }
  };
</script>

router

export default [
{
path: ‘/inbox/’,
component: require(’./components/Inbox.vue’)
},
{
path: ‘/conversation/:id’,
component: require(’./components/Chat.vue’)
},
{
path: ‘/group/:id’,
component: require(’./components/GroupChat.vue’)
},
{
path: ‘/auth/’,
component: require(’./components/Auth.vue’)
},
{
path: ‘/confirm/’,
component: require(’./components/Confirm.vue’)
}
]

2

In F7 V1 not have navigate function, use load function

https://v1.framework7.io/docs/router-api.html

1 Like
3

Thank you, the error is gone but there is no transition(

         this.$store.state.phone = phone
      this.$store.state.pin = pin_code
      // Переходим на страницу подтверждения
      this.$router.load('/confirm/')
    }
  },
  isValid (p) {
4

$router.load({url: ‘/confirm/’})

https://v1.framework7.io/vue/navigation-router.html

1 Like