QUASAR使用router.push跳转路由时地址栏变化但页面内容不刷新问题

核心错误为路由实例调用方式不符合规范：
你导入的router本身是已经完成初始化的路由实例，不是用于生成实例的工厂函数，代码中router().push()的写法属于错误调用，拿到的返回值不是标准路由实例，仅能修改地址栏路径，无法触发<RouterView>组件的响应式更新，因此页面内容不会重渲染。刷新页面时浏览器会重新请求站点资源，路由重新初始化匹配路径，就会正常加载根路径对应内容。

另外你的模板中<q-form>标签未闭合，也可能存在潜在的模板解析异常。

1. 修正路由跳转代码 #

有两种可选写法，二选一即可：

写法一：直接修正现有调用 #

将Login.vue中跳转代码的括号删除即可：

// 原有错误写法
// router().push({ path: '/' })
// 修正后写法
router.push({ path: '/' })

写法二（更推荐）：使用Vue Router组合式API #

更符合Vue3组合式API的规范，避免导入实例出错的问题：

<script>
import axios from 'axios'
import { ref } from 'vue'
import { useQuasar } from 'quasar'
// 替换原有路由导入，使用useRouter
import { useRouter } from 'vue-router'
export default {
  setup () {
      const $q = useQuasar()
      const router = useRouter() // 调用useRouter获取路由实例

      const user = ref(null)
      const pass = ref(null)
      const btnlogin = async () => {
          axios.post("http://localhost:3050/loginQuest",{
            uss : user.value,
            pww : pass.value
          })
          .then(resp=>{
            if(resp.data=="ERROR"){
              $q.notify({
                type:'negative',
                message:'Datos incorrectos!'
              })
            } 
            else{
              router.push({ path: '/' })
            } 
          })
      }
    return {
        user, pass, btnlogin
    }
  }
}
</script>

2. 补全模板闭合标签 #

补充<q-form>的闭合标签，避免模板解析异常：

<template>
<div>
    <q-form @submit="btnlogin">
     <q-input v-model="user" type="text" label="Usuario" />
     <q-input v-model="pass" type="password" label="Contraseña" />
     <q-btn color="primary" label="Ingresar" type="submit"/>
    </q-form> <!-- 补充该闭合标签 -->
</div>
</template>

异常排查 #

如果修正后问题仍存在，检查两项配置：

• 确认src/router/index.js为默认导出路由实例，示例正确写法：

import { createRouter, createWebHistory } from 'vue-router'
import routes from './routes'

const router = createRouter({
  history: createWebHistory(process.env.VUE_ROUTER_BASE),
  routes
})

export default router

• 检查是否存在全局路由前置守卫，未正确调用next()方法放行跳转。

内容的提问来源于stack exchange，提问作者Dillman