[Feature Request] Add support for Vue 2.7

[kingyue737]

What problem does this feature solve?

As composition api has been incoporated in vue 2.7, vue-router should provide useRoute and useRouter to enable router usage in <setup script>.

What does the proposed API look like?

const router = useRouter()
router.push(...)

Just like in Vue3

[posva]

I think it makes sense to release this as a new minor. It would also be the last minor we release in Vue Router to align with Vue Core.

[xiaoxiangmoe]

@posva Should we change source code to typescript align to vue 2.7?

[posva]

no, because this codebase is not going to get the upgrade vue (adding a whole set of new APIs).

Vue Router v4 composables should be exposed as a sub import: import {} from 'vue-router/composables' to avoid any breakage

[xiaoxiangmoe]

Ok, can I take this? I'm willing to create a PR about vue 2.7.

[posva]

Of course!

[logue]

I made a 2.7 compatible version.
https://github.com/logue/vue2-helpers

Use it as follows:

import { useRouter } from '@logue/vue2-helpers/vue-router';

When officially supported, you can use it as it is by deleting @logue/vue2-helpers/.

[fyeeme]

@psalaets much expect!

[0xe69e97]

I made a 2.7 compatible version. https://github.com/logue/vue2-helpers

Use it as follows:

import { useRouter } from '@logue/vue2-helpers/vue-router';

When officially supported, you can use it as it is by deleting @logue/vue2-helpers/.

You can do this!

// utils.js
import { getCurrentInstance } from 'vue'

export function useRoute() {
  const { proxy } = getCurrentInstance()
  const route = proxy.$route
  return route
}
export function useRouter() {
  const { proxy } = getCurrentInstance()
  const router = proxy.$router
  return router
}

import { useRouter, useRoute } from '@/utils/index.js' // '@/utils/index.js' => 'vue-router'

setup() {
  const router = useRouter()
  const route = useRoute()
  // ...
}

[Lupeiwen0]

You can use it temporarily:

// in router/index
import { computed, reactive } from 'vue'
import VueRouter from 'vue-router'

let Router = null

export function setupRouter(app) {
  app.use(VueRouter)

  Router = new VueRouter({
    mode: 'history',
  })

  // Router === reactive(Router) reactive use Vue.observable
  reactive(Router)

  return Router
}

export function useRoute() {
  const routeEffect = computed(() => Router?.currentRoute || {})
 
  /**
   * or
   */
   return {
      ...(Router?.currentRoute || {}),
      __effect__: routeEffect, //  is ref
    }

  /**
   * or
   */
  // return { route: Router?.currentRoute, routeEffect };

  /**
   * use in setup
   * const { route, routeEffect } = useRoute()
   * console.log(route);       //  { fullPath: '/', name: null, ...}
   * console.log(routeEffect); //  { effect: {...}, value: {...} }
   */

  /**
   * or
   * If you don't mind using .value
   */
  // return routeEffect
}

or vuex:

import Vuex from 'vuex'

const Store = new Vuex.Store({})

export function useStore() {
  return Store
}

and use :

<script setup>
import { computed } from 'vue' 
import { useRouter, useRoute } from '@/router'
import { useStore } from '@/store'

const store = useStore()

const router = useRouter()
const route = useRoute()

const currentRouteName = computed(() =>route.__effect__.value.name)

</script>

[ElteHupkes]

@Lupeiwen0 One of the reasons for wanting to have this is the ability to watch for changes in the current route object (parameters, query parameters, etc) from the active component. router.currentRoute will give you access to the correct route object in setup, but that object can't be watched.

[EveChee]

I just wanted to write this feature, and you guys have already done it.

It's exactly what I thought it would be. Ha ha.

[Lupeiwen0]

@ElteHupkes
Indeed, I modified the previous method, but this is only a temporary solution