我正在尝试切换到 vuejs3 和新的 vue-router。

现在我看到 beforeRouteEnter 没有暴露：

所以我的问题是：如何像/dashboard以前一样在特定路线上触发初始 axios 请求？

在 vuejs 2 中，我可以通过返回渲染 html 标记直接在路由器中渲染。我正在尝试使用 vue-router 4 在 vue3 中做同样的事情，但它似乎不起作用：

知道如何让组件呈现该路由器视图并允许我使用我的子路由吗？我宁愿不加载单个组件只是为了容纳“”。这在 vue-router 3 中完美运行，不知道 4 有什么问题。我也在从“vue”导入 {h}。

我用 vue 3.0 和 vue-router 4.0 构建了一个应用程序。

我的App.vue组件中有这个非常简单的代码（第一个渲染组件）：

第一页是渲染器 - 没问题。但是一旦我导航到另一个页面，页面就会变成空白。如果我删除mode="out-in"它，它会起作用（但过渡很丑陋）。

有谁知道为什么？

我使用 Vite 创建了一个项目并添加了 vue-router@next。我在 main.js 中使用路由器，因为我已经浏览过，似乎这是问题所在，但它不能解决我遇到的问题。

我收到的警告如下：

如何使路由器视图工作？因为我现在无法使用它。

我将 Vue3 与 vue-router 4.0.5 一起使用，我遇到了一个问题，即 useRoute() 似乎可以正确检索路由，但路由的查询未定义，即使存在查询。

对于路径/search?q=vue，它预期searchQuery等于vue，但它返回未定义。

在模板中，{{ $route.query.q }}正确返回查询值。

登录到控制台时，该route对象被正确记录并包含路由的查询对象，但searchQuery未定义。

我想知道为什么searchQuery在这个例子中返回未定义。

所以我有一个在历史模式下运行的 Vue 路由器。单击时它可以完美运行<router-links>，但我无法让地址栏导航“粘贴”。尽管加载了正确的页面内容，该地址始终会恢复到之前的 URL。

您可以通过运行vue create projectName并选择Manually select features-> Router-> Vue 3.x->自己复制它Use history mode (Y)。这将创建下面的示例项目。

如果您导航到http://localhost:8080/about，将加载 About 视图。正确的。

现在，如果您键入http://localhost:8080/，主页视图会加载，但 URL 会恢复为/about!

如果您http://localhost:8080/about再次键入，则会发生完全相反的情况。

我做错了什么，还是这是 Vue Router 4 中的错误？

使用 Vue3 和 vue-router4，两个不同的组件共享同一个子组件。组件模板设置如下：

这些是配置的路由：

组件中设置了一些数据Child：

以上旨在selected根据是​​否在路由中找到匹配项来设置为 true 或 false。然后将结果FilterResults作为道具传递给：

通过以上，selected过滤器数据中的值被评估，预期结果是当组件加载时，$route 中的过滤器在true数据中设置为。

问题是， 和 的子组件ComponentA是ComponentB相同的：

• ComponentA /componenta/xyz?size=1m 无法按预期工作，其中在路由中找到的匹配项未true在filters数据中设置为。
• ComponentB /componentb?size=1m 确实按预期工作，其中在路由中找到的匹配项设置为true数据中filters。

给定以下路线：

},

为什么这样做（仪表板组件可见）：

但这不会：

在一种情况下，URL 有一个斜杠，而在另一种情况下则没有。我在文档的某处读到这是来自 Vue2 的重大变化。请参阅： named-children-routes-with-an-empty-path-no-longer-appends-a-slash

所以这里真正的问题可能是：我怎样才能让我的工作子导航（带重定向）同时仍然能够使用路由名称而不是路由 url 部分进行导航。

问题

router.push({name:"Order", params: {obj: {}}) 推送失败obj: {}，而是路由接收obj: '[object Object]'

情况

我有这样的路线设置

这导致 props 没有被定义Order.vue

预期结果

基于这个答案对象在旧版本中工作

我测试过的

我用 jest 来检查传递给的参数router.push，它们看起来应该是这样的：{name:"Order", params: {obj: {}}

有任何想法吗？

使用 vue-router 3，可以添加一个方法router-link，@click.native="myMethod"就像这里解释的那样。

在 vue 3 中，该.native修饰符已被弃用。

当用户点击 时<router-link to="somewhere" @click="myMethod">Click me</router-link>，它会创建一个错误，整个应用程序会重新加载。

使用vue-router 4router-link ，点击标签时触发方法的正确方法是什么？