使用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: [ { path: "/", redirect: { name: "Page1" } }, { path: '/page1', name: 'Page1', component: Page1 }, { path: '/page2/:id', name: 'Page2', component: Page2 } ] })
注意,Page2 的路由中路径中包含一个 :id。这个冒号表示我们正在处理一个变量
打开项目src/components/page1.vue文件,将<template>块改为下面的样子,获取 URL 中的参数
<template> <div class="hello"> <h1>{{ msg }}</h1> <router-link :to="{ name: 'Page2', params: { id: 1234 } }">Navigate to Page2</router-link> </div> </template>
在上面的代码片段中,我们选择将参数传递给指定的路由。该 id 将匹配先前在路由定义的参数。您可以定义多个参数,但是要小心,因为它们很容易造成问题
在接收端,我们需要弄清楚如何获取和处理路由参数。
打开 src/components/page2.vue 文件:
<template> <div class="hello"> <h1>{{ msg }}, your id is {{ id }}</h1> <a style="cursor: pointer; text-decoration: underline" v-on:click="navigate()">Navigate to Page1</a> </div> </template> <script> import router from '../router' export default { name: 'Page2', data () { return { id: 0, msg: 'Hey Nic Raboy' } }, created() { this.id = this.$route.params.id; }, methods: { navigate() { router.go(-1); } } } </script> <style scoped> h1, h2 { font-weight: normal; } ul { list-style-type: none; padding: 0; } li { display: inline-block; margin: 0 10px; } a { color: #42b983; } </style>
与之前的例子相比,我们在上面的组件增加了一些内容
首先,您将注意到我们正在data方法中初始化一个id值。这是为了防止出现任何未定义的错误
每次创建组件时,Vue 都会调用其生命周期钩子的 Created 方法。在Created方法中,我们从$route获得传递的id值,并将其设置为局部变量。这个本地id变量在<template>块中
但是,如果我们需求传递更复杂的参数或者是可选参数,这时候就该换一种方式了
利用 Query 参数传递数据
Vue 中的查询参数与路由器参数的工作原理类似,但它们不是必需的,而且你并不需要事先修改路由
回到之前的src/components/page1.vue 文件上,其中 <template> 块如下:
<template> <div class="hello"> <h1>{{ msg }}</h1> <router-link :to="{ name: 'Page2', params: { id: 1234 }, query: { debug: true }}">Navigate to Page2</router-link> </div> </template>
注意,这一次我们将传递URL或路由器参数以及一组新的Query参数。这些Query参数可以是任意数量的键值对
我们来看一下在接受端怎么处理这些 Query 参数
打开src/components/page2.vue 文件, 修改<script> 如下:
<script> import router from '../router' export default { name: 'Page2', data () { return { debug: false, id: 0, msg: 'Hey Nic Raboy' } }, created() { this.id = this.$route.params.id; if(this.$route.query.debug) { this.debug = this.$route.query.debug; } }, methods: { navigate() { router.go(-1); } } } </script>
就像使用路由器参数一样,我们在 data 方法中初始化了一个占位符变量。在Created方法中,我们检查Query参数中是否存在 debug 参数,如果存在,将其设置为本地变量
<template> <div class="hello"> <h1>{{ msg }}, your id is {{ id }}</h1> <p>Debug mode is currently set to {{ debug }}</p> <a style="cursor: pointer; text-decoration: underline" v-on:click="navigate()">Navigate to Page1</a> </div> </template>
在上面的<template> 块中,我们展示debug变量
总结
本文你学到了如何使用 URL 参数和Query参数在 Vue 应用程序中的路由之间传递数据。如果你没有读过我上一篇关于页面导航的文章,你看到的一些东西可能没有多大意义。如果你还没有看过,我建议你去看看
via: https://www.thepolyglotdeveloper.com/2017/11/pass-data-between-routes-vuejs-web-application/
译者:Alex1996a
以上就是本文的全部内容,希望对大家的学习有所帮助
您可能感兴趣的文章:
- vue学习之Vue-Router用法实例分析
- 浅析vue-router中params和query的区别
- 详解vue-router 动态路由下子页面多页共活的解决方案
- vue-router结合vuex实现用户权限控制功能
- vue实现权限控制路由(vue-router 动态添加路由)
- 解决vue-router 二级导航默认选中某一选项的问题
- vue-router 中 meta的用法详解
- 浅谈vue-router路由切换 组件重用挖下的坑
- vue-router之实现导航切换过渡动画效果
- 使用vue-router切换页面时实现设置过渡动画
- vue-router的钩子函数用法实例分析
- vue-router路由模式详解(小结)
- vue-router两种模式区别及使用注意事项详解
- vue-router跳转时打开新页面的两种方法
- vue-router二级导航切换路由及高亮显示的实现方法
- 移动端底部导航固定配合vue-router实现组件切换功能
- 详解新手使用vue-router传参时注意事项
- Vue路由管理器Vue-router的使用方法详解
- vue打开二级或者三级页面传输对象,再刷新浏览器数据丢失问题解决(vue使用router传递数据)
- Android中在Activity之间传递数据的另一种方法, 使用application context
- json的使用以及在页面之间数据的传递
- C#使用委托(delegate)实现在两个form之间传递数据的方法
- 页面之间dataset数据传递方法
- 使用MVC框架中要注意的问题:如何在页面和用户控件之间传递数据
- 使用MVC框架中要注意的问题(五):如何在页面和用户控件之间传递数据
- 使用MVC框架中要注意的问题(五):如何在页面和用户控件之间传递数据
- 页面之间传递数据方法之一(查询字符串)
- vue.js组件之间传递数据的方法
- vue中各组件之间传递数据的方法示例
- Vue页面之间传递及接收参数方法
- vue中使用vue-router切换页面时滚动条自动滚动到顶部的方法(HTML5 history 模式下可用)
- 一道面试试题:试介绍ASP.NET页面之间数据传递的几种方法
- vue组件之间数据传递的方法实例分析
- 页面之间dataset数据传递方法
- WP7的页面之间传递数据方法之一-----查询字符串
- servlet之间的数据传递-使用POST方法
- 关于使用EL语句来接收servlet给jsp传递及jsp页面之间传递的数据
- vue中使用vue-router切换页面时滚动条自动滚动到顶部的方法