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