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

前言

几周前，我写了关于 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: [

{