十年网站开发经验 + 多家企业客户 + 靠谱的建站团队
量身定制 + 运营维护+专业推广+无忧售后,网站问题一站解决
前言
几周前,我写了关于 Vue 路由的使用和在 Vue 页面导航的文章。这是在应用程序中探索的一个基本例子。
通常,在将导航构建到应用程序中时,您会发现需要将数据从一个页面传递到另一个页面。(不通顺)例如,您遵循 master-detail 模式,其中您有一个数据列表,通过更深入地挖掘可以获得关于列表中特定项的更多信息。
我们将学习如何使用路由和 URL参数以及查询参数在 Vue 页面之间传递数据。
如果你还没有读过我之前的教程或者不熟悉 vue-router 库,我建议你温习一下。
利用 URL 参数在不同页面中传递数据
假设您有一个 web 应用程序,它显示从某个数据库获得的用户列表。这个列表可能只包含姓名信息,但是数据库中的数据可能包含更多的信息,例如地址、电话等。
在典型的场景中,我们使用主键或其他标识符维护这个用户列表,并用于在请求详细信息时查询数据库时。这样的值可非常合适作为 URL 参数在不同页面传递。
为此,目标页面需要获取到 URL 参数。在前面的教程基础上,我们可以将项目 src/router/index.js 中的文件更改为如下所示
import Vue from 'vue' import Router from 'vue-router' import Page1 from '@/components/page1' import Page2 from '@/components/page2' Vue.use(Router) export default new Router({ routes: [ { path: "/", redirect: { name: "Page1" } }, { path: '/page1', name: 'Page1', component: Page1 }, { path: '/page2/:id', name: 'Page2', component: Page2 } ] })