vue.js QUASAR：使用“推送”进行重定向不起作用

dgtucam1 于 2023-01-14 发布在 Vue.js

关注(0)|答案(2)|浏览(175)

日安.我有以下文件“pages / Login.vue”这里的形式：Simple 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"/>
</div>
</template>

<script>
import axios from 'axios'
import { ref } from 'vue'
import { useQuasar } from 'quasar'
import router from 'src/router/index'
export default {
  setup () {
      const $q = useQuasar()

      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>

验证成功后，地址栏将更改为http：//localhost：8080，但内容不会更改，Login.vue窗体继续显示在屏幕上。
it sends me to the path but does not change the content, but if I refresh the page it shows the correct content
这是我的路由器/routes.js：

const routes = [
  {
    path: '/',
    component: () => import('layouts/MainLayout.vue'),
    children: [
      { path: '', component: () => import('pages/Index.vue') },
      { path: '/form', component: () => import('pages/Form.vue') },
      { path: '/user', component: () => import('pages/Usuarios.vue') },
      { path: '/prueba', component: () => import('pages/Prueba.vue') },
      { path: '/facturas', component: () => import('pages/Facturas.vue') },
    ],
  },
  { path: '/login', component:()=> import('pages/Login.vue')},
  { path: '/:catchAll(.*)*', component: () => import('pages/Error404.vue')}
]

export default routes

我把“vueRouterMode”部分的quasar.conf.js设置从散列改为历史。我希望你能帮助我，我被卡住了。谢谢！

vue.js

来源：https://stackoverflow.com/questions/68401981/quasar-redirection-using-push-does-not-work

2条答案

按热度按时间

hgtggwj01#

您的脚本应如下所示：

<script>
import axios from 'axios'
import { ref } from 'vue'
import { useQuasar } from 'quasar'
import { useRoute } from 'vue-router' // <- import useRoute here

export default {
  setup () {
      const $q = useQuasar()

      const router = 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: '/' }) // << router is an object, not a function
            } 
          })
      }
    return {
        user, pass, btnlogin
    }
  }
}
</script>

赞(0）回复(0）举报 2023-01-14

efzxgjgh2#

有可能，你是创建路由上yout router.js或router/index.js一个方法 Package 路由器（如果你告诉你路由器定义帮助知道它）.但我是一个类似的问题，我解决它：

let router: Router;
...

export default route(function ( ... ) {
   if (router) {
       return router;
   }
    ....
    router = createRouter({
    ... // bla bla bla
    });

    return router;
});

它需要唯一智能对象路由器它帮我解决了

赞(0）回复(0）举报 2023-01-14

我来回答

vue.js QUASAR：使用“推送”进行重定向不起作用

2条答案

相关问题

热门标签

最新问答