How to access route / router from vue-router 3.5.3

[beejaz]

hi,
"unplugin-vue2-script-setup": "^0.10.0",
"@vue/composition-api": "^1.4.9",
"vue": "^2.6.14",
"vue-demi": "^0.7.5",
"vue-router": "^3.5.3"
"vite": "^2.9.1",
"vite-plugin-vue2": "^1.9.3",

When using <script setup> how can I access previous this.$router and this.$route in my component? If i for example would like to get a route params?

Currently im using
const currentRoute = computed(() => getCurrentInstance()?.proxy?.$route)
and currentRoute.params?.customer_id

But I dont have access to it (customer_id) until the page is fully loaded

[WangChong99]

You can try this
src/utils/hooks.js

import {computed} from "@vue/composition-api";
import router from '../router/index.js'
import store from '../store/index.js'
export const useStore = () => {
return store
}
export const useRouter = () => {
return router
}
export const useRoute = () => {
// 必须添加计算属性，这样才会跟随「响应式依赖」router.app.$route 作出相应变化
return computed(() => router.app.$route)
}

test.vue

<script setup> import {useRouter,useRoute} from "../utils/hooks.js" const router = useRouter() const route = useRoute() console.log(route.value.params) </script>

[andremsantos]

thanks @WangChong99 this worked for me.
I'm wondering how could I use plugins with <script setup>?

in main.js file I have the following:

import VueNotify from 'vue-notifyjs'

Vue.use(VueNotify, {/*some config option*/}) // how to consume this plugin with <script setup>??
...

In component I use it like this:

export default defineComponent({
  setup(props, ctx) {
    const submitForm = () => {
        // logic for submitting form
	
	//using the plugin
	ctx.root.$notify({ type: 'success', messsage: 'Successfully submitted form.'})
     }
        return { submitForm }
  }
})

How would I do it with script setup? would it be similar to the route, router and state you mentioned? create a useNotify?

[xiaoxiangmoe]

You can update to vue-router 3.6 and vue 2.7.

Or just copy code here from vue-router/composables.mjs and change import { getCurrentInstance, effectScope, shallowReactive, onUnmounted, computed, unref } from 'vue'; to import { getCurrentInstance, effectScope, shallowReactive, onUnmounted, computed, unref } from '@vue/composition-api';