路由传参数。在很多时候我们需要路由上面传递参数，比如新闻列表页，我们需要传递新闻ID，给新闻详细页。
1新闻列表页模板
<template id="news">
<div>
<h2>新闻列表</h2>
<ul>
<li>
<router-link to="/news/001">新闻001</router-link>
</li>
<li>
<router-link to="/news/002">新闻002</router-link>
</li>
</ul>
</div>
</template>1234567891011121312345678910111213
我们访问/news/001，跳转到新闻详细页，展示001的这条新闻。
2新闻详细页组件准备
<template id="NewsDetail">
<div>
新闻详细页面
<span>{{$routeparamsid}}</span>
</div>
</template>123456123456
$routeparamsid获取路由上的参数
在js里定义路由组件：
//新闻详细页组件
const NewsDetail = { template: '#NewsDetail' };1212
3定义路由，增加一个路由
{ path: '/news/:id', component: NewsDetail },11
访问/news/001或者/news/002就展示新闻详细页
4全部代码如下：
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8">
<script src=">
1在path中添加/:id来对应 $routerpush 中path携带的参数。在子组件中可以使用来获取传递的参数值。
方案一：
实现：
在组件two中点击时会将点击的城市名传递到city组件中
路由配置如下
city组件以及接收传来的参数的方式
效果
点击聊城，在跳转到city组件之后，将聊城这个参数也传递了过来。
方案二：
实现：
在组件main中点击对应的季节将该参数传递到跳转的MainD组件中
组件MainD接参
效果：
点击夏天跳转页面之后，在MainD页面显示夏天
方案三：平常最常用的一种方式
实现：
在组件list中向listDetail组件中传递对应的多个参数
路由配置
组件listDetail中以及接收参数
相当于在list组件中点击列表，在listDetail组件中，显示点击的列表项的详情
效果：
以上便是vue传参常见的三种方式
以上就是关于vue-router怎么给子路由传参全部的内容，包括:vue-router怎么给子路由传参、动态Vue-router(路由)、vue传参的三种方式等相关内容解答，如果想了解更多相关内容，可以关注我们，你们的支持是我们更新的动力！
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）