业务中会遇到点击列表跳转到详情页，

1.在index.js修改我们的跟组件

新建router2的文件

import React from 'react'

import {

HashRouter as Router,

Route,

// Link,

Switch

} from 'react-router-dom'

import Main from './main'

import Info from './info'

import About from './../router1/about'

import Topic from './../router1/topic'

import Home from './home'

exact是精准匹配有时候会造成路由出不来

export default class IRouter extends React.Component {

render() {

return (

{/* */}

< Route exact path = "/"

component = {

Home

} />

< Route path = "/main"

render = {

() =>

< Main >

component = {

Info

} >

} >

component = {

About

} >

true

}

path = "/about/abc"

component = {

About

} >

component = {

Topic

} >

{/* */}

);

}

}

router后面直接加组件Home会报错

main.js文件中

home.js中，是默认页面

info.js作为动态组件的接收值，通过this.props.match.params.value来接收值

vue的动态路由(登录之后拿到动态路由通过addRouters&lpar;&rpar;动态添加路由)

登录后我们拿到路由动态路由,后端传的数据可能为这个 { path: '/index', meta: { title: '首页', icon: 'icon-shouye', tab_index: , / ...

【原创】一篇学会vue路由配置 、 动态路由 、多层路由(实例)

先来看看效果图: 为了方便讲解,我没有使用vue脚手架,如果需要的,可以留言跟我要.不多说开工: 首先,html先组上

vue管理平台的动态路由(后台传递路由，前端拿到并生成侧边栏)

前端的路由从后台获取,包括权限: 大体步骤包括:路由拦截(钩子函数)---->后台获取路由数据 ----> 保存到本地或vuex中. 在router-->index.js中: rou ...

VueJs&lpar;10&rpar;---vue-router(动态路由，嵌套式路由，编程式路由)

vue-router(动态路由,嵌套式路由,编程式路由) 本文是基于官网学习,官网具体学习目录:vue-router 一.安装 基于vue-cli脚手架安装还是蛮简单的:在文件当前目录下运行: npm ...

CCNP路由实验之六 动态路由协议之IS-IS

 CCNP路由实验之六动态路由协议之IS-IS 动态路由协议能够自己主动的发现远程网络.仅仅要网络拓扑结构发生了变化.路由器就会相互交换路由信息,不仅能够自己主动获知新添加的网络.还能够在当前网络 ...

CCNP路由实验之七 动态路由之BGP

 CCNP路由实验之七 动态路由之BGP 动态路由协议能够自己主动的发现远程网络,仅仅要网络拓扑结构发生了变化,路由器就会相互交换路由信息,不仅能够自己主动获知新添加的网络,还能够在当前网络连接失 ...

React 性能优化之组件动态加载(react-loadable)

React 项目打包时,如果不进行异步组件的处理,那么所有页面所需要的 js 都在同一文件中(bundle.js),整个js文件很大,从而导致首屏加载时间过长. 所有,可以对组件进行异步加载处理,通常 ...

React 系列 - 写出优雅的路由

前言 自前端框架风靡以来,路由一词在前端的热度与日俱增,他是几乎所有前端框架的核心功能点.不同于后端,前端的路由往往需要表达更多的业务功能,例如与菜单耦合.与标题耦合.与"面包屑" ...

React通过dva-model-extend实现 dva 动态生成 model

前言 实现通过单个component 单个router通过相应的标识对应产生不同model实现数据包分离,model namespce将会覆盖基础的Model,其中的model[state|subsc ...

随机推荐

HTML5中使用SVG

SVG 即 Scalable Vector Graphics,是一种用来绘制矢量图的 HTML5 标签.你只需定义好XML属性,就能获得一致的图像元素. 使用SVG之前先将标签加入到HTML body ...

Ubuntu 14&period;04 LTS 下 android 2&period;3&period;5 源码编译过程

Ubuntu 14.04 LTS 下 android 2.3.5 源码编译过程   在新的Ubuntu 64位系统下去编译早期的安卓源码是会出现很多问题的,因为64位系统在安装完成后,很多32位的兼容 ...

MySQL瘦身

解压mysql-x.y.z-win32|64.zip 删除不用的目录:保留bin.data.share三个文件夹 删除bin里的多余文件:保留mysqld.exe.mysqladmin.exe (如果 ...

android C&sol;C&plus;&plus; source files 全局宏定义 &period;

\system\core\include\arch\linux-arm AndroidConfig.h * ============================================== ...

【redis】03list类型

list类型 redis的list类型是一个链表结构,他的主要功能是push.pop.获取一个范围的所有值等等一些操作, 咱们push什么意思,push是不是相当于咱们php里面的array_push ...

(Problem 47)Distinct primes factors

The first two consecutive numbers to have two distinct prime factors are: 14 = 2  7 15 = 3  5 The fi ...

vue2 递归组件--树形

递归组件,官方给的教程太简便了,根本看不出到底怎么用.于是自己查网摸索了一下,这儿只把核心思想写出来. 效果如下图,点击后打开二级菜单,再点击后打开三级. //js //引子//思想:当v-if='f ...

微信小程序--录音

var app = getApp(), $ = require("../../utils/util.js"); const recorderManager = wx.getReco ...

mysql 查询优化 ~ 优化基础补充

一 简介:此文章是对于 sql通用基础的补充说明 二 虚拟列: mysql虚拟列是mysql5.7的新特性,对于函数计算形成的结果可作为虚拟列,并可以对虚拟列添加索引,这样就能加速sql的运行,不过有 ...

Redis 基础、高级特性与性能调优

本文将从Redis的基本特性入手,通过讲述Redis的数据结构和主要命令对Redis的基本能力进行直观介绍.之后概览Redis提供的高级能力,并在部署.维护.性能调优等多个方面进行更深入的介绍和指导. ...

react 动态修改路由_react动态路由以及获取动态路由相关推荐

  1. react接收后端文件_React如何从后端获取数据并渲染到前端？

    ajax和json对于reactjs来说主要是表现形式不同,但最终都会变成js object,根据具体情况不同而选择. 比如我们建立一个用于筛选网站提供能够的服务项目(service)的页面,这个页面 ...

  2. react 显示当前时间_react中monent如何获取日期？

    方法:1.使用"npm install moment --save"安装moment:2.在组件中使用import语句引入moment:3.使用monent提供的方法来获取日期,例 ...

  3. React Native之react-navigation动态修改标题、页面导航等

    目录 1.navigation导航对象相关参数 1.1在当前Component获取navigation导航对象 1.2navigate方法 1.2.2使用示例 1.2.3源码 1.3params 1. ...

  4. SAP QM Dynamic Modification Rule （动态修改规则）

    SAP QM Dynamic Modification Rule (动态修改规则) 我们讲到决定样本大小的方式具体有三种: ⭐手动输入 ⭐比例大小 ⭐采样过程 然后采样过程的创建通常也是有两种方式: ...

  5. 【QM-03】Dynamic Modification Rule （动态修改规则）

    上节中我们讲到决定样本大小的方式具体有三种: ⭐手动输入 ⭐比例大小 ⭐采样过程 然后采样过程的创建通常也是有两种方式: ?跟批量大小有关系:百分比/AQL ?跟批量大小没有关系:固定值 而当我们选择 ...

  6. 求你了，别再随便打日志了，教你动态修改日志级别！

    GitHub 19k Star 的Java工程师成神之路,不来了解一下吗! 之前写过一篇文章<明明有自动清理,日志还是把我的服务干爆了!>,介绍过一次大促故障,是因为日志量激增,导致服务器 ...

  7. python爬虫动态加载页面_Python+Selenium爬取动态加载页面（2）

    注: 上一篇<Python+Selenium爬取动态加载页面(1)>讲了基本地如何获取动态页面的数据,这里再讲一个稍微复杂一点的数据获取全国水雨情网.数据的获取过程跟人手动获取过程类似,所 ...

  8. [绍棠] nuxt.js获取当前路由的名称和路径

    获取当前路由名称 $nuxt.$route.path 获取当前路由路径 $nuxt.$route.name 获取router const router = $nuxt.$router

  9. Ant Design Pro v5 获取动态菜单与基于角色权限管理视频教程（33 个视频）

    Ant Design Pro v5 获取动态菜单与基于角色权限管理视频教程(33 个视频) 很多人问如何获取动态菜单的,所以在 antd prov 5 来讲一下角色管理的.从最基础的用户管理,角色管理 ...

  10. vue 动态修改路由参数

    转载自  vue 动态修改路由参数 import merge from 'webpack-merge':修改原有参数 this.$router.push({query:merge(this.$rout ...

最新文章

  1. php自动到某个时间提醒,2周后,php脚本cron作业将提醒消息发送到特定的电子邮件地址...
  2. 机器学习--多标签softmax + cross-entropy交叉熵损失函数详解及反向传播中的梯度求导
  3. RHEL/CentOS6.4 x64 VNC服务配置
  4. C++语言基础 例程 文本文件的读写
  5. Advice for Students--开始学术研究
  6. Android魔术——手把手教你实现水晶球波浪进度条
  7. 在asp.net 2.0中使用SqlBulkCopy类迁移数据
  8. boot lvm 分区_Linux如何在线对逻辑分区扩容
  9. 表达式计算器类的设计4（面向对象的表达式计算器7）
  10. python树形结构显示_Python将字典转换成树状的层次结构，并在tkin中显示
  11. 073：【Django数据库】ORM聚合函数详解-Count
  12. 安徽大学计算机专硕奖学金,2019年安徽大学新闻传播跨考华东师范大学计算机专硕，总分418，排名第一经验分享！...
  13. Python + Face_recognition人脸识别之考勤统计
  14. 《CSS Secrets》读书笔记（2）
  15. 如何优雅的(不花钱)获取一本技术图书
  16. 常用邮箱哪家好用？TOM邮箱口碑评价
  17. lol人物模型提取（二）
  18. 养不起真猫，就用代码吸猫-Unity粒子实现画猫咪
  19. AGV搬运机器人以在物流、电商等仓储企业中成为标配
  20. Trove 3.0.0

热门文章

  1. PHP 命令行之-F (--process-file) 对每个输入行都执行 PHP 文件 (PHP 5 新加)
  2. 我的WCF之旅（5）：面向服务架构（SOA）和面向对象编程（OOP）的结合——如何实现Service Contract的重载（Overloading）...
  3. redis 经典36问
  4. [bzoj 4066]简单题
  5. 高德地图入驻广州交警 实现“互联网+交通”无缝对接
  6. Ubuntu14.04创建WiFi热点
  7. 从源码编译安装TensorFlow
  8. eclipse不能自动编译生成class文件的解决办法
  9. VB6 GDI+ 入门教程[7] Graphics 其他内容
  10. Oracle数据泵对已经存在的表加载索引