本文共 2866 字，大约阅读时间需要 9 分钟。

一,前言

介绍组件时,知道可以使用props选项向传入对应的参数,也就是父到子通信本篇介绍vue-router提供的通过路由进行参数传递方式本篇相关代码基于前篇修改而来,和本篇无关的注释将被删除,请查看前篇

二,向路由组件传递参数

为了测试路由组件传递参数的功能,在商品模块->商品列表下,添加一个商品详情路由组件通过点击商品列表下的商品显示对应的商品详情商品详情组件中,根据path中传递的商品id属性值进行商品对象查询,并显示由于需要添加一个商品详情路由组件,所以还是那老三步添加一个路由组件分3步1,定义路由组件2,在router中注册路由3,使用路由:在调用组件中写跳转
   
    和显示
    
   

第一步,定义路由组件

新增ProductDetail.vue

商品险详情组件,通过this.$route.params.id获取外部传入的id属性值在数据集合中筛选当前id的商品对象,并显示由于mounted钩子只执行一次,切换路由不触发,所以只能用于首次加载对于后续的切换,需要对路有对象进行监听,获取点击的id属性值,重新获取商品对象

第二部,注册路由

/* *  路由器对象模块 */import Vue from 'vue'import VueRouter from 'vue-router'import Product from '../pages/Product.vue'import Home from '../pages/Home.vue'import News from '../pages/News.vue'import ProductList from '../pages/ProductList.vue'// 引入路由组件import ProductDetail from '../pages/ProductDetail.vue'Vue.use(VueRouter)export default new VueRouter ({  // 注册路由  routes: [    {      path: '/home',      component: Home    },    {      path: '/product',      component: Product,      children: [        {          path: '/product/news',          component: News        },        {          path: 'productList',          component: ProductList,          children: [            {              path:'detail/:id',      //简写,同/product/productList/detail/:id              component: ProductDetail            }          ]        },        {          path: '',          redirect: '/product/news'        }      ]    },    {      path: '/',      redirect: '/home'    }  ]})

在路由器配置文件中,引入新创建的路由组件设置商品详情为商品列表组件的嵌套组件设置path:/product/productList/detail/:id传递参数id属性值

第三部,使用路由

商品详情路由组件为商品列表组件的嵌套组件所以商品详情路由组件在商品列表组件被使用在商品列表组件添加跳转
   
    和显示
    
   

PoductList.vue

三,运行程序

点击第一条数据,跳转至:

显示了第一条对应的数据

当点击第二条数据,跳转至

四,props传值

路由组件也支持props进行传值例如修改首页Home.vue,添加props参数名并显示

Home.vue:

修改根组件,对路由组件传值

首页运行结果:

五,结尾

本例中使用了`/product/productList/detail/${product.id}`在链接中进行传值所以取值时使用了this.$route.params.id,在params中取值如果使用get式的传值,如`/product/productList/detail?id=${product.id}`取值就需要使用this.$route.query.id,在query中取值vue-router还支持多种传参方式,参考文档:https://router.vuejs.org/zh/guide/essentials/passing-props.html下一篇介绍vue-router编程式路由