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


Posted in Javascript onJuly 15, 2019

前言

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

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
Firefox div高度自适应
Apr 28 Javascript
jquery的index方法实现tab效果
Feb 16 Javascript
解决jquery异步按一定的时间间隔刷新问题
Dec 10 Javascript
iframe窗口高度自适应的又一个巧妙实现思路
Apr 04 Javascript
jQuery中:only-child选择器用法实例
Jan 03 Javascript
浅析js绑定事件的常用方法
May 15 Javascript
js判断iframe中元素是否存在的实现代码
Dec 24 Javascript
BootStrap+Mybatis框架下实现表单提交数据重复验证
Mar 23 Javascript
EasyUI创建人员树的实例代码
Sep 15 Javascript
对vue中v-if的常见使用方法详解
Sep 28 Javascript
Vue.js 带下拉选项的输入框(Textbox with Dropdown)组件
Apr 17 Vue.js
用JS创建一个录屏功能
Nov 11 Javascript
微信小程序在其他页面监听globalData中值的变化
Jul 15 #Javascript
vue中filters 传入两个参数 / 使用两个filters的实现方法
Jul 15 #Javascript
微信小程序全局变量改变监听的实现方法
Jul 15 #Javascript
vue draggable resizable 实现可拖拽缩放的组件功能
Jul 15 #Javascript
微信小程序如何使用canvas二维码保存至手机相册
Jul 15 #Javascript
如何给element添加一个抽屉组件的方法步骤
Jul 14 #Javascript
详解vuex的简单todolist例子
Jul 14 #Javascript
You might like
php使用mb_check_encoding检查字符串在指定的编码里是否有效
2013/11/07 PHP
php导出word格式数据的代码实例
2013/11/25 PHP
php实现zip文件解压操作
2015/11/03 PHP
PHP迭代器和生成器用法实例分析
2019/09/28 PHP
Maps Javascript
2007/01/22 Javascript
WEB 浏览器兼容 推荐收藏
2010/05/14 Javascript
一个简单的js渐显(fadeIn)渐隐(fadeOut)类
2010/06/19 Javascript
JS操作Cookie写入和读取实例代码
2013/10/20 Javascript
js实现仿Discuz文本框弹出层效果
2015/08/13 Javascript
Angular表单验证实例详解
2016/10/20 Javascript
关于BootStrap modal 在IOS9中不能弹出的解决方法(IOS 9 bootstrap modal ios 9 noticework)
2016/12/14 Javascript
JS填写银行卡号每隔4位数字加一个空格
2016/12/19 Javascript
原生JS 购物车及购物页面的cookie使用方法
2017/08/21 Javascript
快速解决brew安装特定版本flow的问题
2018/05/17 Javascript
Jquery和CSS实现选择框重置按钮功能
2018/11/08 jQuery
微信小程序中data-key属性之数据传输(经验总结)
2020/08/22 Javascript
[05:24]TI9采访——教练
2019/08/24 DOTA
python selenium 获取标签的属性值、内容、状态方法
2018/06/22 Python
pycharm激活码快速激活及使用步骤
2020/03/12 Python
python属于解释语言吗
2020/06/11 Python
keras 回调函数Callbacks 断点ModelCheckpoint教程
2020/06/18 Python
浅谈TensorFlow中读取图像数据的三种方式
2020/06/30 Python
浅析NumPy 切片和索引
2020/09/02 Python
python 服务器运行代码报错ModuleNotFoundError的解决办法
2020/09/16 Python
Html5导航栏吸顶方案原理与对比实现
2020/06/10 HTML / CSS
英国电子专家:maplin
2019/09/04 全球购物
求职推荐信
2013/10/28 职场文书
煤矿班组长的职责
2013/12/25 职场文书
元宵节晚会主持人串词
2014/03/25 职场文书
婚假请假条怎么写
2014/04/10 职场文书
机电一体化应届生求职信
2014/08/09 职场文书
拾金不昧感谢信
2015/01/21 职场文书
安全员岗位职责范本
2015/04/11 职场文书
通讯稿范文
2015/07/22 职场文书
php中pcntl_fork详解
2021/04/01 PHP
一篇文章弄懂Python中的内建函数
2021/08/07 Python