Vue视频教程系列第三十八节-参数传递

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

router-link中to属性的简写方式：

我们先对<router-link>里的to属性做一些补充：to属性值可以是router.js里配置的path值，也可以是name值，都可以进行无障碍跳转。

<router-link to=”/home”></router-link>
<router-link to=”home”></router-link>

不管to后面跟的是path值还是name值，这都是一个简写方式。

router-link中to属性的完整写法：

完整写法需要给to属性进行绑定，其后面的值呢是对象，也就是key=value的对象。所以完整写法我们可以写成以下形式：

<router-link :to=”{path: ‘/home’}”></router-link>
<router-link :to=”{name: ‘home’}”></router-link>

接收参数以及传递参数：

好，言归正传，我们是怎么进行参数传递的呢？

我们的name，path都可以传过去啊！啊？是吗？那我们去接收页面看看是否能接收吧。接收参数怎么接收呢？

{{ $route.name }}

这样，我们就可以接收到name值了！

嗯，还不错，可是我们有的时候传递的参数可是多种多样的啊，这可怎么办呢？没问题，继续往下看：

<router-link :to=”{name: ‘home’,params: { id: ‘001’ }}”></router-link>

我们可以用一个params这个属性将我们想传递的数据放在里面。Vue就是将所有的传递的参数都存放在这个params里了，在接收页面只要接收这个属性值就可以了！

{{ $route.params.id }}

传递参数就是这么简单，这是vue官方提供的参数传递的方式噢！

如果有不明白的地方，在文章下面留言哈，我会第一时间回复的噢?

就到这里了，休息休息一会儿吧：）明天继续加油噢！

相关推荐