Quasar 应用程序路由问题

Question

我现在正在开发一个Quasar应用程序。到目前为止，我只有一个登录页面和 quasar 提供的默认布局。我有一个单独的服务器，在端口 100 上运行。我已经设置了代理，将来自 axios 和 socket.io 的所有调用重定向到我的服务器，该服务器为我的应用程序托管 mySQL 数据库。我已经设置了我的路线，如果我在浏览器的搜索中手动输入路线，我可以转到它，但是一旦我在登录中使用 this.$router.push() 转到主页，它就不会导航到它。例如，我在端口 8080 上托管此应用程序。默认情况下，它将转到登录页面：“localhost:8080”。当登录验证时，用户应该使用 this.$router.push('/main') 重定向到我的 quasar 应用程序中的主页。然而，它并没有这样做。当我按下登录按钮时，网址就会更改为“localhost:8080/?”。但是，如果我在浏览器中手动输入：“localhost:8080/main”，它会将我引导至主页。 这是我的路线代码：

export default [
{ 
    path: '/', 
    component: () => import('components/login'),
  },

  {
    path: '/main',
    component: () => import('layouts/default'),
    children: [
      { path: '', component: () => import('pages/index') },
      { path: 'chat', component: () => import('components/chat')}
    ]
  },

  { // Always leave this as last one
    path: '*',
    component: () => import('pages/404')
  }
]

这是我的登录组件的代码：

<template>
    <div>
        <form id="login" label="Login">
            <q-input type="text" float-label="Username" v-model="username" /> <br>
            <q-input v-model="password" type="password" float-label="Password" />
            <q-btn input type="submit" @click="authenticate()">Submit</q-btn>
        </form>
    </div>
</template>

<style>
    input{
        margin: 10px;
    }
    #login{
        vertical-align: middle;
        text-align: center;
    }
</style>

<script>

module.exports = {
  data() {
    return {
      username: '',
      password: ''
    }
  },
  methods: {
    authenticate () {
      this.$axios.post('/api/login', {
        Username: this.username,
        Password: this.password
      })
        .then(response => {
          this.$Socket.emit('LoginInfo', {
            firstname: response.data[0].ClientFirstName,
            lastname: response.data[0].ClientLastName,
            name: response.data[0].ClientFirstName + ' ' + response.data[0].ClientLastName,
            userid: response.data[0].ClientID
          })
          console.log(this.$router)
          this.$router.push({path: '/main'})
        })
        .catch(function (error) {
          console.log(error)
        })
    }
  }
}
</script>

我花了几个小时试图查找可能存在的问题，但到目前为止我还没有找到任何有用的结果。也许这可能是一个错误？我的同事检查了我的代码，他也认为没有问题。希望你们能帮助我。我真的很感激。

根据要求，服务器代码：

const Express=require('express');
const path=require('path');
var cors = require('cors')
var app = Express();
var http = require('http').Server(app);
var io = require('socket.io')(http);
var mysql = require('mysql');

var con = mysql.createConnection({
  host: "localhost",
  user: "root",
  password: "",
  database: "ChatDB"
});

con.connect(function(err) {
  if (err)throw err;
  /*let query="INSERT INTO Client(ClientUserName, ClientPassword, ClientFirstName, ClientLastName) VALUES(\"jeffrey\", \"penner\", \"Jeffrey\", \"Penner\")";
  con.query(query, function(err, result){
    if(err) throw err;
  })*/
  console.log("Connected!");
});

io.set('origins', 'http://localhost:8080');

app.use(Express.json())
//app.use('/public', Express.static(path.join(__dirname, 'public')));
app.use(cors());

app.post('/login', cors(), function(req, res){
  let a=req.body.Username;
  let b=req.body.Password;
  let query="SELECT ClientID, ClientFirstName, ClientLastName FROM Client WHERE ClientUsername=\'" + a + "\' AND ClientPassword=\'" + b + "\';";
  con.query(query, function (err, rows) {
    if (err){
      throw err;
    }
    else if(rows.length)
    {
      console.log(rows);
      res.json(rows);
    }
  })
});

io.on('connection', function(socket){
  console.log('a user connected');
  socket.on('disconnect', function(){
    console.log('user disconnected');
  });
  socket.on('LoginInfo', function(data) {
    console.log(data)
  });
})

http.listen(100, function(){
  console.log('listening on *:100')
});

index.js 路由器代码：

import Vue from 'vue'
import VueRouter from 'vue-router'

import routes from './routes'

Vue.use(VueRouter)

const Router = new VueRouter({
  /*
   * NOTE! Change Vue Router mode from quasar.conf.js -> build -> vueRouterMode
   *
   * If you decide to go with "history" mode, please also set "build.publicPath"
   * to something other than an empty string.
   * Example: '/' instead of ''
   */

  // Leave as is and change from quasar.conf.js instead!
  mode: process.env.VUE_ROUTER_MODE,
  base: process.env.VUE_ROUTER_BASE,
  scrollBehavior: () => ({ y: 0 }),
  routes
})

export default Router

Answer 1

我认为您没有像应该那样导入 main.js 中的路由，因此无法在所有组件中访问路由器对象。

我将向您展示我是如何完成路线的（简化示例）。

路线

import Vue from 'vue'
import Router from 'vue-router'
import Homepage from '@/pages/home/Home.vue'

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      name: 'Homepage',
      component: Homepage
    },
  ],
  mode: 'history',
  base: '/'
})

main.js：

import Vue from 'vue'
import App from './App.vue'
import router from './router' //import the router

new Vue({
  el: '#app',
  router, //use it in vue instance
  template: '<App/>',
  components: { App }
})

您将可以访问所有要使用的组件：

this.$router.push({path: '/yourPath'})

请注意，您还可以为路线使用名称并按名称调用它们，例如：

  routes: [
    {
      path: '/myPath',
      name: 'myPath',
      component: cmp
    }
  ]

然后像这样调用组件中的路由：

this.$router.push({name: 'myPath'})

有关更多信息，请查看命名路线

Answer 2

您好，我有同样的问题，我通过更新 quasar.conf.js 中的值来修复它，在我放置的构建括号中

build: {
  vueRouterMode: 'history', // available values: 'hash', 'history'
  publicPath: '/',

以及我的路线文件

const routes = [
  {
    path: '/',
    component: () => import('layouts/MainLayout.vue'),
    children: [
      { path: '', component: () => import('pages/Index.vue') }
    ]
  },
  {
    path: '/catalog',
    component: () => import('layouts/MainLayout.vue'),
    children: [
      { path: '', component: () => import('pages/Catalog.vue') }
    ]
  },
  // Always leave this as last one,
  // but you can also remove it
  {
    path: '*',
    component: () => import('pages/Error404.vue')
  }
]

现在一切正常

Answer 3

问题实际上很简单 -

this

行中的

this.$router.push({path: '/main'})

指的是函数的局部范围，而不是全局范围。 因此，在顶层，在 axios POST 调用之前，您应该执行以下操作：

var _this = this

然后使用该上下文在 axios 代码中调用路由器。

_this.$router.push({path: '/main'})

只是 Javascript 的东西。

Answer 4

我通过将

vueRouterMode: "hash"

更改为

vueRouterMode: "history"

来解决此问题，并按如下方式制作： quasar.config.js 中“build”字段中的

publicPath: "/"

。