Helper function ---->
import route from '../router/index';
Adding store here cause of TS limitations:
const router = route({
store: pinia,
})
export function RoutePusher() {
router.push({name: 'login'})
}
Component ------->
<script lang="ts" setup>
import { RoutePusher } from 'src/helpers/file.ts';
function ComponentMethod() {
RoutePusher();
}
</script>
Router ------->
export default route(function (/* { store, ssrContext } */) {
const createHistory = process.env.SERVER
? createMemoryHistory
: process.env.VUE_ROUTER_MODE === 'history'
? createWebHistory
: createWebHashHistory;
const Router = createRouter({
scrollBehavior: () => ({ left: 0, top: 0 }),
routes,
// Leave this as is and make changes in quasar.conf.js instead!
// quasar.conf.js -> build -> vueRouterMode
// quasar.conf.js -> build -> publicPath
history: createHistory(
process.env.MODE === 'ssr' ? void 0 : process.env.VUE_ROUTER_BASE
),
});
return Router;
});
After using the method, only url changes but not the page. I've also tried this in my layout:
<router-view :key="route.fullPath"></router-view>