Compatibility issues of Vue 3 Options API with routing

[XuXYong]

Vue version

3.4.38

Link to minimal reproduction

https://github.com/XuXYong/router-bug

Steps to reproduce

1. Download the code from the link above and run it
2. The home page has two buttons, clicking them will navigate to result-option page
3. Click the OK button on the result-option page to return to the home page.

What is expected?

The OK button on the result-option page can return to the home page.

What is actually happening?

The writing style of Composition API is ok. The writing style of Options API works fine on most machines, but Google Pixel 7 Pro and Samsung Galaxy S25 is not working, clicking the OK button has no response;

System Info

[email protected], [email protected]
Google Pixel 7 Pro and Samsung Galaxy S25 is not working

Any additional comments?

No response

[edison1105]

Have you tested with the latest version?

[XuXYong]

Have you tested with the latest version?

no,could this be related to the version?

[liulinboyi]

@XuXYong For more Information you can in your example project use vConsole and visite the project in the Google Pixel 7 Pro, Samsung Galaxy S25 to catch the error and get the browser UA.

I had edit you example project code to compare Composition API Router and Options API Router:

result.vue

<script setup>
    import { useRouter } from "vue-router";
    const router = useRouter();
    window.CompositionRouter = router;
    
    const goTo = () => {
        router.push('/home');
    }
    </script>
      
    <template>
        <div>
            <button @click="goTo()">OK</button>
        </div>
    </template>
      
    <style scoped>
    
    </style>
      

result-option.vue

<script>
export default {
    data() {
        return {
        }
    },
    methods: {
        goTo() {
            this.$router.push('/home');
        }
    },
    mounted() {
        window.optionRouter = this.$router;
    }
}
</script>
    
<template>
    <div>
        <button @click="goTo()">OK</button>
    </div>
</template>
    
<style scoped>

</style>

the window.optionRouter and window.CompositionRouter are the same.

the window.optionRouter.push and window.CompositionRouter.push are the same.