Vue核心技术-39,vue-router-向路由组件传递数据

一,前言

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

二,向路由组件传递参数

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

第一步,定义路由组件

新增ProductDetail.vue

<template><div><h2>商品详情</h2><div><ul><li>id:{{$route.params.id}}</li><li>书名:{{productDetail.name}}</li><li>作者:{{productDetail.author}}</li><li>售价:{{productDetail.price}}</li></ul></div></div>
</template><script>var list = [{id:1,name: 'Vue实战',author:'梁灏',price:'¥79.00'},{id:2,name: 'Vue.js权威指南',author:'张耀春',price:'¥99.00'},{id:3,name: 'Vue.js前端开发',author:'陈陆扬',price:'¥45.00'},{id:4,name: 'Vue2实践揭秘',author:'梁睿坤',price:'¥79.00'},{id:5,name: 'Vue移动开发实战技巧',author:'李利德',price:'¥58.00'}]export default {data: function () {return {productDetail:{}}},// mounted只执行一次,切换路由不触发,用于首次加载mounted: function () {const id = this.$route.params.id*1this.productDetail = list.find(detail => detail.id ===id)},watch:{// 监听路由变化-用于非首次加载$route: function () {// 得到参数id值const id = this.$route.params.id*1this.productDetail = list.find(detail => detail.id===id)}}}
</script><style></style>

商品险详情组件,通过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/:idcomponent: ProductDetail}]},{path: '',redirect: '/product/news'}]},{path: '/',redirect: '/home'}]
})

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

第三部,使用路由

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

PoductList.vue

<template><div><ul><li v-for="(product, index) in productList" :key="product.id"><!--ES5用'  ES6用`--><!--由于${product.id}为变量,应使用:to--><router-link :to="`/product/productList/detail/${product.id}`">{{product.name}}</router-link></li></ul><!--路由视图-用于显示商品详情--><router-view></router-view></div>
</template><script>export default {data: function () {return{productList:[]}},// 挂载时执行mounted: functi,只执行一次on () {// 模拟请求setTimeout(() => {const list = [{id:1,name: 'Vue实战',author:'梁灏',price:'¥79.00'},{id:2,name: 'Vue.js权威指南',author:'张耀春',price:'¥99.00'},{id:3,name: 'Vue.js前端开发',author:'陈陆扬',price:'¥45.00'},{id:4,name: 'Vue2实践揭秘',author:'梁睿坤',price:'¥79.00'},{id:5,name: 'Vue移动开发实战技巧',author:'李利德',price:'¥58.00'}]this.productList = list;}, 1000);}}
</script><style></style>

三,运行程序

点击第一条数据,跳转至:http://localhost:8080/#/product/productList/detail/1

显示了第一条对应的数据

当点击第二条数据,跳转至http://localhost:8080/#/product/productList/detail/2

四,props传值

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

Home.vue:

<template><div><h2>首页</h2><!--显示msg--><p>{{msg}}</p><input type="text"></div>
</template><script>export default {// props接收参数props: {msg: String}}
</script><style></style>

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

<template><div><div class="row"><div class="col-xs-offset-2 col-xs-8"><div class="page-header"><h2>网上书城</h2></div></div></div><div class="row"><div class="col-xs-2 col-xs-offset-2"><div class="list-group"><router-link to="/home" class="list-group-item">首页</router-link><router-link to="/product" class="list-group-item">商品</router-link></div></div><div class="col-xs-6"><div class="panel"><div class="panel-body"><keep-alive><!--通过路由传值--><router-view msg="123"></router-view></keep-alive></div></div></div></div></div>
</template><script></script><style></style>

首页运行结果:

五,结尾

本例中使用了`/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编程式路由

Vue核心技术-39,vue-router-向路由组件传递数据相关推荐

33_向路由组件传递数据
一级路由: home.jsx import React, {Component} from 'react' import {Switch, Route, Redirect} from 'react-r ...
[vue] 怎么缓存当前打开的路由组件，缓存后想更新当前组件怎么办呢？
[vue] 怎么缓存当前打开的路由组件,缓存后想更新当前组件怎么办呢? 可以在路由meta中加入参数, 对打开的路由进行keep-alive的判断, 通过钩子active等个人简介我是歌谣,欢迎和 ...
Vue——05-02组件的数据、为什么data要使用函数、父组件给子组件传递数据的三种写法、父传子以及传两种以上的值、默认值以及父传子的引用类型
目录在组件中获取数据二.组件中的data为什么必须要是函数? 父组件给子组件传递数据--props属性第一种写法: 第二种写法: 第三种写法: 传默认值 : 父组件传子组件数据--引用类型的两种 ...
vue子组件获取父组件数据_在vue.js中父组件是如何向子组件传递数据的？
本文只有一个学习点. 父组件如何向子组件传递数据. 一起学习,更多文章请关注我的头条号,我是落笔承冰. 一.先创建一张空白网页index.html,在head标签里设置好vue的链接库. 二.写一个绑 ...
vue 父向子组件传递数据，子组件向父组件传递数据方式
父组件向子组件传递数据通过props,子组件引入到父组件中,设置一个值等于父组件的数据,通过:bind将数据传到子组件中,子组件中通过props接收父组件的数据,这样就可以使用父组件的数据了,循环组件 ...
vue请求数据传给子组件_vue.js基础，父组件如何向子组件传递数据「607」
本文只有一个学习点. 父组件如何向子组件传递数据. 一起学习,更多文章请关注我的头条号,我是落笔承冰. 一.先创建一张空白网页index.html,在head标签里设置好vue的链接库. 二.写一个绑 ...
Vue父子组件传递数据
<template><div><!-- <div>< ...
【Vue 组件化开发三】父组件给子组件传递数据、组件通信（父传子、子传父）、父访问子（children、ref）、动态组件（is、component）
目录一.前言完整内容请关注: 二.父组件给子组件传递数据 1.使用props属性,父组件向子组件传递数据 1.使用组件的props属性 2.向cmessage对象传值 2. props属性使用 1 ...
VUE父组件向子组件传递数据
在使用VUE开发的时候,有时候,我们需要通过父组件像子组件传递数据或者为了防止每个子组件都会有请求数据事件的发生,从而导致代码冗余,所以,我们可以把同一个模块下的所有子组件请求事件都放到父组件中去处理 ...
vue.js：父组件向子组件传递数据props
笔记代码 <!DOCTYPE html> <html><head><meta charset="utf-8"><meta na ...

Vue核心技术-39,vue-router-向路由组件传递数据

一,前言

二,向路由组件传递参数

第一步,定义路由组件

第二部,注册路由

第三部,使用路由

三,运行程序

四,props传值

五,结尾

Vue核心技术-39,vue-router-向路由组件传递数据相关推荐

最新文章

热门文章