1

版本：

vueJS: 3.0.0
vuex: 4.0.2
Chrome: Version 94.0.4606.61 (Official Build) (x86_64)

像 vueJS 这样的 SPA 框架的一个优点是它们在网络消耗方面提供了一些效率（即，通过将 UI/UX 资产批量交付给客户端来减少服务器命中，并希望最大限度地减少服务器请求）。但是我遇到了相反的情况：即，我需要重新访问服务器才能在 vueJS 组件/视图之间导航。这似乎与 SPA 精神高度矛盾，我怀疑在我的设置中某些简单的东西一定是错误的。详情如下。

router/index.js：

import { createRouter, createWebHistory } from 'vue-router'
import Home from '@/views/Home.vue'
import Car from '@/views/Car.vue'
import Bike from '@/views/Bike.vue'

const routes = [
  {
    path: '/',
    name: 'Home',
    component: Home
  },
  {
    path: '/about',
    name: 'About',
    // route level code-splitting
    // this generates a separate chunk (about.[hash].js) for this route
    // which is lazy-loaded when the route is visited.
    component: () => import(/* webpackChunkName: "about" */ '@/views/About.vue')
  },
  {
    path: '/cars/new',
    name: 'New Car',
    component: Car
  },
  {
    path: '/cars/:id',
    name: 'Edit Car',
    component: Car,
    props: true
  },
  {
    path: '/bikes/new',
    name: 'New Bike',
    component: Bike
  }
]

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

export default router

然后在Car.vue组件中，我有一个表单提交处理程序，如下所示：

    handleSubmit(event) {
      let form = event.target;
      if (form.checkValidity()) {
        // Add or update Car.
        window.location.href = window.location.origin + process.env['BASE_URL'];
      }
      this.wasValidated = true

我没有使用window.location.href，而是尝试使用：

this.$router.push('Home');

但这没有任何效果。也就是说，浏览器地址栏中的 URL 以类似的形式开始http://localhost:8080/myapp/，并且在 router-push 之后保持这种方式。

我还尝试推向其他路线，例如About；在这种情况下，浏览器地址栏正确切换到http://localhost:8080/myapp/about，但页面内容保持不变！

显然，这不可能是正确的行为。

你能建议如何解决这个问题吗？

4

1 回答 1

0

this.$router.push('Home')尝试'Home'作为路径推送，但您的路由器配置中没有匹配的路径，也没有后备路由（对于404s），因此路由根本不会改变。

如果您打算按name推送路由，则$router.push()参数需要是一个对象：

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

如果您更喜欢使用路径，则路径Home实际上是/：

this.$router.push('/')
于 2021-10-06T05:55:17.063 回答