Watch Vue route params/query

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36

// Consider the router:   export const router = new VueRouter({     routes: [{         path: 'article/:articleId'         component: Article,     }] })     // Now consider this composition file:   import Vue from 'vue'; import { computed } from '@vue/composition-api'; import { router } from '../router';   const routeData = Vue.observable({params: {}, query: {}});   router.afterEach(route => {     routeData.params = route.params;     routedata.query = route.query; });function useParams() {     return computed(() => routeData.params) }   // After we made this kind of state, we can read it from everywhere in our application. For example:   setup() {    const article = reactive({...});    const params = useParams();    function fetchArticle(id) {       //assign article..    }    watch(() => params.articleId, fetchArticle);    return { article }; } Colored by Color Scripter

cs