Vue.js vue路由：使用正确的路由/URL在同一页面上列出详细信息视图

我试图在同一页上显示项目列表和项目详细信息。 单击列表中的项目时，该项目将显示在详细视图中，url应更改为/items/item\u id

我现在就是这样做的，但当然url不会改变：

我试着在点击列表中的一个项目时通过执行

router.push（…）

来更改url，但这会重新加载整个页面。 我还寻找了嵌套路由器视图，但我不确定这是否是正确的方法或如何实现它

在vue.js中，在同一页面上显示项目列表和项目详细信息的最佳方式是什么？

您可以在该页面上为详细信息视图设置：

在路由器配置中，向列表视图路由添加一个

子节点
数组。子路由配置应具有一个（前缀为
：
）以包含项目ID，该ID将在显示路由时显示在URL中：

//router.js
导出默认的新VueRouter({
路线：[
{
路径：'/items'，
组件：（）=>import（'@/views/ListView.vue'），
儿童：[
{
路径：':itemId'，
道具：没错，
组件：（）=>导入（'@/views/ListDetailView.vue'）
}
]
}
]
})

在列表视图组件中，添加一个。这与根视图（例如，

App.vue

）中的主

路由器视图

是分开的

在

项目表

组件中，为每个项目添加一个匹配步骤1中详细视图URL的项目（即

/items/

+项目ID）：

{{item.name}

---

您真的需要重定向吗？通过检查组件内的任何给定状态或url参数，可以通过简单的

v-if

实现相同的功能。是的，url显示正确的id非常重要