{"id":17957553,"url":"https://github.com/itinance/quasar-router-bug","last_synced_at":"2025-04-03T17:32:18.874Z","repository":{"id":210990084,"uuid":"727929691","full_name":"itinance/quasar-router-bug","owner":"itinance","description":"An example application that shows a router issue","archived":false,"fork":false,"pushed_at":"2023-12-05T23:23:25.000Z","size":170,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":2,"default_branch":"main","last_synced_at":"2025-02-09T06:16:08.873Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/itinance.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2023-12-05T21:43:15.000Z","updated_at":"2023-12-05T21:45:04.000Z","dependencies_parsed_at":"2024-10-29T11:17:26.698Z","dependency_job_id":null,"html_url":"https://github.com/itinance/quasar-router-bug","commit_stats":null,"previous_names":["itinance/quasar-router-bug"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/itinance%2Fquasar-router-bug","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/itinance%2Fquasar-router-bug/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/itinance%2Fquasar-router-bug/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/itinance%2Fquasar-router-bug/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/itinance","download_url":"https://codeload.github.com/itinance/quasar-router-bug/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247046744,"owners_count":20874714,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-10-29T10:55:36.561Z","updated_at":"2025-04-03T17:32:18.850Z","avatar_url":"https://github.com/itinance.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Router Test (routertest)\n\nA test to investigate router related issues.\n\nGiven is a **VueJS 3** application, based on Quasar and I am struggling to use the **Router** programmatically.\n\nThe issue is described best like this:\n\n# 1. The Problem\n\nWhen I push the User to another route, only the URL in the browser will be updated, but the corresponding Component will not get rendered.\nI have to manually refresh the web page in the Webbrowser in order to get the corresponding component rendered properly.\n\n# 2. What happens instead?\n\n3.1 This is the index page, containing the button that shall send the user to another page:\n\n[![enter image description here][1]][1]\n\n3.2. When I click on the Button, the URL will be updated correctly but the test-component won't get rendered at all:\n\n[![enter image description here][2]][2]\n\n3.3. But when I refresh the web browser now manually (or navigate to that particular URL), it will render the test component:\n\n[![enter image description here][3]][3]\n\n\n\n# 3. Code\n\nI have published a full working example on GitHub: https://github.com/itinance/quasar-router-bug\n\nThe router is configured in history-mode, but this doesn't matter as the issue appears also in the hash-mode.\n\nHere are my routes:\n\n    import { RouteRecordRaw } from 'vue-router';\n\n    const routes: RouteRecordRaw[] = [\n      {\n        path: '/',\n        component: () =\u003e import('layouts/MainLayout.vue'),\n        children: [{ path: '', component: () =\u003e import('pages/IndexPage.vue') }],\n      },\n\n      {\n        path: '/test',\n        name: 'test',\n        component: () =\u003e import('layouts/MainLayout.vue'),\n        children: [{ path: '', component: () =\u003e import('pages/TestPage.vue') }],\n      },\n\n      // Always leave this as last one,\n      // but you can also remove it\n      {\n        path: '/:catchAll(.*)*',\n        component: () =\u003e import('pages/ErrorNotFound.vue'),\n      },\n    ];\n\n    export default routes;\n\nHere is my Index-Component, that contains a button where I want to send the user programmatically to another page:\n\n    \u003ctemplate\u003e\n      \u003cq-page class=\"row items-center justify-evenly\"\u003e\n\n        \u003cdiv class=\"q-pa-md example-row-equal-width\"\u003e\n          \u003cdiv class=\"row\"\u003e\n            \u003cdiv\u003eINDEX PAGE\u003c/div\u003e\n          \u003c/div\u003e\n\n\n          \u003cdiv class=\"row\"\u003e\n            \u003cdiv\u003e\n              In order to navigate to the test page, you need to manually reload the page after clicking the button.\n              Otherwise, only a white page will be rendered.\n\n              \u003cq-btn align=\"left\" class=\"btn-fixed-width\" color=\"primary\" label=\"Go to test page\" @click=\"doRedirect\"/\u003e\n            \u003c/div\u003e\n          \u003c/div\u003e\n\n\n        \u003c/div\u003e\n      \u003c/q-page\u003e\n    \u003c/template\u003e\n\n    \u003cscript lang=\"ts\"\u003e\n    import {Todo, Meta} from 'components/models';\n    import ExampleComponent from 'components/ExampleComponent.vue';\n    import {defineComponent, ref} from 'vue';\n    import {dom} from 'quasar';\n    import {useRouter} from 'vue-router';\n\n    export default defineComponent({\n      name: 'IndexPage',\n      computed: {\n        dom() {\n          return dom\n        }\n      },\n      components: {},\n      setup() {\n\n        const router = useRouter();\n\n        const doRedirect = () =\u003e {\n          console.log('doRedirect');\n          router.push({name: 'test'});\n        }\n        return {doRedirect};\n      }\n    });\n    \u003c/script\u003e\n\nAnd this is the test-component, which is the target component where I want to use send:\n\n    \u003ctemplate\u003e\n      \u003cq-page class=\"row items-center justify-evenly\"\u003e\n\n        \u003cdiv class=\"q-pa-md example-row-equal-width\"\u003e\n          \u003cdiv\u003e\n            TEST PAGE\n\n            this will only be rendered after manual page-reload\n\n          \u003c/div\u003e\n        \u003c/div\u003e\n      \u003c/q-page\u003e\n    \u003c/template\u003e\n\n    \u003cscript lang=\"ts\"\u003e\n    import { Todo, Meta } from 'components/models';\n    import ExampleComponent from 'components/ExampleComponent.vue';\n    import { defineComponent, ref } from 'vue';\n\n    export default defineComponent({\n      name: 'TestPage',\n      setup () {\n        return { };\n      }\n    });\n    \u003c/script\u003e\n\n\n[1]: https://i.stack.imgur.com/Z4mBw.png\n[2]: https://i.stack.imgur.com/DkcXb.png\n[3]: https://i.stack.imgur.com/XKzLu.png\n\n\n## Install the dependencies\n```bash\nyarn\n# or\nnpm install\n```\n\n### Start the app in development mode (hot-code reloading, error reporting, etc.)\n```bash\nquasar dev\n```\n\n\n### Lint the files\n```bash\nyarn lint\n# or\nnpm run lint\n```\n\n\n### Format the files\n```bash\nyarn format\n# or\nnpm run format\n```\n\n\n\n### Build the app for production\n```bash\nquasar build\n```\n\n### Customize the configuration\nSee [Configuring quasar.config.js](https://v2.quasar.dev/quasar-cli-vite/quasar-config-js).\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fitinance%2Fquasar-router-bug","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fitinance%2Fquasar-router-bug","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fitinance%2Fquasar-router-bug/lists"}