Vue基础五——Vue-router如何参数传递

toqiye 2024-10-01 22:59 1 浏览 0 评论

开发中，参数的传递是个最基本的业务需求。通过URL地址来传递参数是一个形式，这节课我们就看看vue-router为我们提供了哪些传递参数的功能。我们先想象一个基本需求，就是在我们点击导航菜单时，跳转页面上能显示出当前页面的路径，来告诉用户你想在所看的页面位置（类似于面包屑导航）。

1.1.1、用name传递参数

前面课一直出现name的选项，但是我们都没有讲，这节我们讲name的一种作用，传递参数。接着上节的程序继续编写。

两步完成用name传值并显示在模板里：

在路由文件 src/router/index.js 里配置name属性。

 routes: [ //配置路由，这里是个数组
  { //每一个链接都是一个对象
    path: '/', //链接路径
    name: 'HelloWorld', //路由名称，
    component: HelloWorld //对应的组件模板
  }]

模板里(src/App.vue)用 $route.name 的形式接收，比如直接在模板中显示：

<p>{{$route.name}}</p>

1.1.2、通过标签中的to传参

也许你也会觉得上边的传参很不正规，也不方便，其实我们多数传参是不用name进行传参的，我们用标签中的to属性进行传参，需要您注意的是这里的to要进行一个绑定，写成 :to 。

先来看一下这种传参方法的基本语法：

<router-link :to="{name:xxx,params:{key:value}}">valueString</router-link>

这里的to前边是带冒号的，然后后边跟的是一个对象形势的字符串.

了解基本的语法后，我们改造一下我们的src/App.vue里的标签,我们把hi1页面的进行修改。

<router-link :to="{name:'hi1',params:{username:'进击的辣条'}}">Hi1页面</router-link>|

把src/reouter/index.js文件里给hi1配置的路由起个name,就叫hi1.

{ path: 'hi1', name: 'hi1', component: Hi1 },

最后在模板里(src/components/Hi1.vue)用$route.params.username进行接收.

{{$route.params.username}}

总结：今天我们学习了两种传参的方法，一般会使用第二种方法。我们通过学习也知道了name的用途，一种作用是传参，一种作用是在传参时起到名称作用。

相关推荐