好资源导航 » 文章资讯 » 使用vue-router在Vue页面之间传递数据的方法

使用vue-router在Vue页面之间传递数据的方法

2023-08-19 23:32:05 59

前言

几周前，我写了关于Vue路由的使用和在Vue页面导航的文章。这是在应用程序中探索的一个基本例子。

通常，在将导航构建到应用程序中时，您会发现需要将数据从一个页面传递到另一个页面。（不通顺）例如，您遵循master-detail模式，其中您有一个数据列表，通过更深入地挖掘可以获得关于列表中特定项的更多信息。

我们将学习如何使用路由和URL参数以及查询参数在Vue页面之间传递数据。

如果你还没有读过我之前的教程或者不熟悉vue-router库，我建议你温习一下。

利用URL参数在不同页面中传递数据

假设您有一个web应用程序，它显示从某个数据库获得的用户列表。这个列表可能只包含姓名信息，但是数据库中的数据可能包含更多的信息，例如地址、电话等。

在典型的场景中，我们使用主键或其他标识符维护这个用户列表，并用于在请求详细信息时查询数据库时。这样的值可非常合适作为URL参数在不同页面传递。

为此，目标页面需要获取到URL参数。在前面的教程基础上，我们可以将项目src/router/index.js中的文件更改为如下所示

importVuefrom'vue'
importRouterfrom'vue-router'
importPage1from'@/components/page1'
importPage2from'@/components/page2'

Vue.use(Router)

exportdefaultnewRouter({
routes:[
{
path:"/",
redirect:{
name:"Page1"
}
},
{
path:'/page1',
name:'Page1',
component:Page1
},
{
path:'/page2/:id',
name:'Page2',
component:Page2
}
]
})

注意，Page2的路由中路径中包含一个:id。这个冒号表示我们正在处理一个变量

打开项目src/components/page1.vue文件，将

使用vue-router在Vue页面之间传递数据的方法

{{msg}}

{{msg}},youridis{{id}}

{{msg}}

{{msg}},youridis{{id}}

随机推荐

使用vue-router在Vue页面之间传递数据的方法

{{msg}}

{{msg}},youridis{{id}}

{{msg}}

{{msg}},youridis{{id}}

热门推荐

随机推荐