Lit-element使用Vaadin Router时window.location跳转报not found

• 语法错误：window.location.href是字符串类型的可读写属性，不是可执行函数。代码中window.location.href ('/component')属于非法调用，运行到该行会直接抛出类型错误，跳转逻辑根本不会执行。
• 路由逻辑错误：Vaadin Router是单页应用客户端路由方案，路由匹配完全在浏览器端完成，不会向服务端请求路径对应的实体资源。就算修正window.location.href为正确的赋值写法，这种方式会触发浏览器整页刷新，直接向服务端请求/component路径的资源，只要服务端没有配置对应路径的重定向规则，就会返回not found404错误。

优先使用Vaadin Router原生提供的编程式导航API实现无刷新跳转，不会触发整页重载，也不需要额外修改服务端配置：

1. 确认项目中初始化Vaadin Router的实例，常规初始化代码参考如下：

import { Router } from '@vaadin/router';
// 初始化路由，指定组件渲染出口
const router = new Router(document.querySelector('#app'));
// 注册路由表，提前确认已注册/component路径对应的路由规则
router.setRoutes([
  { path: '/component', component: '目标组件的标签名' },
  // 其余路由配置
]);

2. 替换原有错误的跳转代码，调用路由实例的go方法完成跳转：

if (this.ArrayNombres.includes(this.name)) {
  // 替换为项目中实际持有的router实例
  router.go('/component');
} else {
  alert("name not found");
}

不推荐的兼容方案：如果一定要用原生location跳转，首先修正语法为赋值形式window.location.href = '/component'，同时给静态资源服务配置fallback规则：将所有不匹配静态文件的请求全部重定向到项目入口index.html。但这种方式会触发整个应用重新加载，内存中存储的前端状态会全部丢失，单页应用场景下不建议使用。

内容的提问来源于stack exchange，提问作者enericode