How to use router in pure Ts non component files in Vue3 version

[hzlzsm]

I am using the latest version of definiteRouter.

[yusufkandemir]

Here's my answer from StackOverflow to the same question: https://stackoverflow.com/a/71730482/9260314

Ideally, you shouldn't need the router outside Vue components, outside boot files, outside src/router/index.js, outside src/store/index.js, and except the places where you define a function that gets called in Vue files(e.g. composables/helpers). Here are all the ways to access the router, both inside and outside SFCs:

Inside .vue files:

• Composition API(inside setup() or <script setup>): const router = useRouter()
• Options API: this.$router
• Inside the <template> section: @whatever="$router.push('...')"

Inside boot files:

// src/boot/whatever.js
export default boot(({ router }) => {
  router.beforeEach(...)
})

Inside src/router/index.js(using boot files are better):

const router = createRouter(...)

router.beforeEach(...)

Inside a function/composable that you use in .vue files:

// /src/composables/whatever.js
export function useWhatever() {
  const router = useRouter()

  // ...

  function changeRoute () {
    router.push('...')
  }

  return {
    changeRoute,
    // ...
  }
}

// Inside setup() or <script setup>
const { changeRoute } = useWhatever()
changeRoute()

As a last resort / lazy way (won't work with SSR):

// src/router/index.js
// Remove export default function route(...), and use it like this:
const router = createRouter(...)
export default router;

// src/whatever.js
import router from 'src/router';

router.push('...');

[hzlzsm]

I'll try the last method