Quasar App路由问题

Question

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

我花了几个小时试图寻找可能是什么问题，但到目前为止，我还没有找到任何有用的东西。也许这可能是个bug？我的同事检查了我的代码，他也认为没有问题。希望你们能帮我。我真的很感激。

根据请求，服务器代码：

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'})

有关更多信息，请查看named routes

Answer 2

问题实际上很简单- this.$router.push({path: '/main'})行中的this引用函数的局部作用域，而不是全局作用域。因此，在顶层，在您的axios POST调用之前，您应该这样做：

var _this = this

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

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

就是Javascript的东西。

Answer 3

您好，我有同样的问题，我通过更新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')
  }
]

现在一切都正常了