4

I am currently trying to start a Vue app which will contain a user login. For some reason the I have been struggling with getting this router redirect to work.

The implementation is straight from the vueschool page and specifically aimed at the composition API.

What am I missing here?

Every time I run the registration script it registers the user correctly and logs the error that it can't find the 'push' property on of undefined. My code completion is telling me it's there, the linting works fine and the IDE Webstorm isn't giving any errors.

<script>
import firebase from "firebase/app";
import "firebase/auth";
import { defineComponent, ref } from "vue";
import { useRouter } from "vue-router";

export default defineComponent({
  name: "Register",
  setup() {
    const form = ref({
      email: "",
      password: "",
      error: "",
    });

const pressed = () => {
  const user = firebase
    .auth()
    .createUserWithEmailAndPassword(form.value.email, form.value.password);

  user
    .then((user) => {
      console.log(user);
      const router = useRouter();
      router.push("/about");
    })
    .catch((e) => console.log(e.message));
};

    return {
      form,
      pressed,
    };
  },
});
</script>

Hope it is just something simpel

Boussadjra Brahim
  • 82,684
  • 19
  • 144
  • 164
Controvi
  • 487
  • 1
  • 6
  • 16

2 Answers2

7

const router = useRouter(); must be declared in the scope of the setup hook not inside any inner scope :

setup(){

   const router = useRouter();

    const form = ref({
      email: "",
      password: "",
      error: "",
    });

const pressed = () => {
  const user = firebase
    .auth()
    .createUserWithEmailAndPassword(form.value.email, form.value.password);

  user
    .then((user) => {
      console.log(user);
     
      router.push("/about");
    })
    .catch((e) => console.log(e.message));
};

    return {
      form,
      pressed,
    };
  },
Boussadjra Brahim
  • 82,684
  • 19
  • 144
  • 164
  • 1
    Even though I had the declaration of router there when I started getting the issue, I just put it back there and suddenly it works. I have no clue to why that is but it works and I am happy. I did mark your answer as the solution as it might help other people and it IS a solution :) cheers mate – Controvi Jun 23 '21 at 06:22
1
<script setup>
const router = useRouter()
function show_detail(row:any){
  router.push({
    path: '/host_add_check_item_detail',
    params: row
  })
}
</script>

The router should be defined outside the function

tantalum
  • 13
  • 8