快上网专注成都网站设计 成都网站制作 成都网站建设
成都网站建设公司服务热线:028-86922220

网站建设知识

十年网站开发经验 + 多家企业客户 + 靠谱的建站团队

量身定制 + 运营维护+专业推广+无忧售后,网站问题一站解决

使用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
    }
  ]
})


网页名称:使用vue-router在Vue页面之间传递数据的方法-创新互联
网页路径:http://6mz.cn/article/ippjc.html

其他资讯