vueJS 3.x：在 HTML 表单提交后从页面导航

Posted 2023-03-16

【中文标题】vueJS 3.x：在 HTML 表单提交后从页面导航

【英文标题】：vueJS 3.x: navigate from page after HTML form-submit

【发布时间】：2021-11-26 04:26:55

【问题描述】：

版本：

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，但页面内容保持不变！

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

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

【参考方案1】：

this.$router.push('Home') 尝试将'Home' 推送为路径，但是您的路由器配置中没有匹配的路径，也没有备用路由（对于404s），所以路由根本没有改变。

如果你打算通过 name 推送路由，$router.push() argument 需要是一个对象：

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

如果你更喜欢使用路径，Home的路径其实是/：

this.$router.push('/')

【讨论】：

好点。但我认为更普遍的问题是这里引用的问题：***.com/questions/69370178/… ...关键是我要导航到的组件已经在页面上，所以在这种情况下，vueJS 不会刷新 DOM。

我刚刚发布了一个新问题，我相信是由相同的路由器行为引起的：***.com/questions/69469819/…