Prevent anchor tag reloading page on @click in Vue.js

Try to add prevent modifier to prevent the default behavior as follows :

  <p>Please click <a @click.prevent="stopProcess">here</a></p>

or like you did but you missed the event as method parameter :

    stopProcess(event){
        event.preventDefault()

If you add href="javascript:void(0)" inside your anchor tag definition, then the page will not reload.

This is because the void operator returns undefined, a result the browser doesn't act on. See here for more info on the void operator.

E.g: <a href="javascript:void(0)" @click="stopProcess">here</a>

So first of you need to know @click does not act like the native click event so event.preventDefault() may not work as expected to make this work, you need to make your native click event with using @click.native. Then you need to pass the event itself to your handler method (The best way to handling the events in vue.js is to use built-in event handlers, so you may get rid of event.preventDefault() and directly use @click.prevent instead).

But all of these alone won't solve your issue because by default if the requested route is in the same domain the current page will follow it after window.open() happens so you need to pass the second value to it, to make sure the new path is not the same as the current one (the preferred value for it is _blank). You also always may need to indicate a href for your <a>.

<template>
  <p>Please click <a href="#" @click.native="stopProcess">here</a></p>
</template>

<script>
  export default {
    methods: {
      stopProcess(event) {
        event.preventDefault()
        var page = "../../../pages/page.pdf"
        window.open(page, '_blank');
      }
    }
  };
</script>

You can also make this much easier without any of this complicated stuff by setting the <a> target to _blank.

<template>
  <p>Please click <a href="../../../pages/page.pdf" target="_blank">here</a></p>
</template>

If you are using vue-router this could be something like this instead of above ones:

<template>
  <p>Please click  <router-link to="../../../pages/page.pdf" target="_blank">Home</router-link></p>
</template>

@click.prevent is the correct method, but the page will still be reloaded.

Since the stopProcess() will throw an exception because the event is not defined, the prevent modifier will not work.

Please remove the event.preventDefault() and add the prevent modifier and you will see it's working.