使用vuerouter在Vue页面之间传递数据的方法

1、使用vue-routeEVue页面之间传递数据的方法刖百几周前，我写了关于Vu路由的使用和在Vu页面导航的文章。这是在应用程序中探索的一个基本例子。通常，在将导航构建到应用程序中时，您会发现需要将数据从一个页面传递到另一个页面。（不通顺）例如，您遵循ter-et模式，其中您有一个数据列表，通过更深入地挖掘可以获得关于列表中特定项的更多信息。我们将学习如何使用路由和参数以及查询参数在Vu页面之间传递数据。如果你还没有读过我之前的教程或者不熟悉vue-rout库，我建议你温习一下。利用参数在不同页面中传递数据假设您有一个e应用程序，它显示从某个数据库获得的用户列表。这个列表可能只包含姓名信息，但是

2、数据库中的数据可能包含更多的信息，例如地址、电话等。在典型的场景中，我们使用主键或其他标识符维护这个用户列表，并用于在请求详细信息时查询数据库时。这样的值可非常合适作为参数在不同页面传递。为此，目标页面需要获取到参数。在前面的教程基础上，我们可以将项目rrouter中的文件更改为如下所示ortVuerovueortouterrovue-routerorteroooeteorteroooeteVue.use(Router)eorteuteouterroutetredirectnameath:/page1ame:Page1,omponent:Pageath:/page2/ame:Page2,omp

3、onent:Page注意，（的路由中路径中包含一个：这个冒号表示我们正在处理一个变量打开项目rooet文件，g龟tevue块改为下面的样子，获取中的参数vhellorouter-toeerN，vigtetov在上面的代码片段中，我们选择将参数传递给指定的路由。该将匹配先前在路由定义的参数。您可以定义多个参数，但是要小心，因为它们很容易造成问题在接收端，我们需要弄清楚如何获取和处理路由参数。打开rooet文件evuetetemsg,youridisidNavigatetoPage1importrouterfrom./routerexportdefaultname:Page2,data()retu

4、rnid:0,msg:HeyNicRaboy,created()this.id=this.$route.params.id;,methods:navigate()router.go(-1);h1,h2font-weight:normal;ullist-style-type:none;padding:0;lidisplay:inline-block;margin:010px;acolor:#42b983;与之前的例子相比，我们在上面的组件增加了一些内容首先，您将注意到我们正在data方法中初始化一个id值。这是为了防止出现任何未定义的错误每次创建组件时，Vue都会调用其生命周期钩子的Create

5、d方法。在Created方法中，我们从$0山6获得传递的id值，并将其设置为局部变量。这个本地d变量在template块中但是，如果我们需求传递更复杂的参数或者是可选参数，这时候就该换一种方式了利用Query参数传递数据Vue中的查询参数与路由器参数的工作原理类似，但它们不是必需的，而且你并不需要事先修改路由回到之前的src/components/page1.vue文件上，其中块如下：msgNavigatetoPage2注意，这一次我们将传递URL或路由器参数以及一组新的Query参数。这些Query参数可以是任意数量的键值对我们来看一下在接受端怎么处理这些Query参数打开src/compo

6、nents/page2.vue文件，修改如下:importrouterfrom./routerexportdefaultname:Page2,data()returndebug:false,id:0,msg:HeyNicRaboy,created()this.id=this.$route.params.id;if(this.$route.query.debug)this.debug=this.$route.query.debug;,methods:navigate()router.go(-1);就像使用路由器参数一样，我们在data方法中初始化了一个占位符变量。在Created方法中，我们检查Query参数中是否存在debug参数，如果存在，将其设置为本地变量msg,youridisidDebugmodeiscurrentlysettodebugNavigatetoPage1在上面的块中，我们展示debug变量总结本文你学到了如何使用URL参数和Query参数在Vue应用程序中的路由之间