业务中会遇到点击列表跳转到详情页,
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()动态添加路由)
登录后我们拿到路由动态路由,后端传的数据可能为这个 { path: '/index', meta: { title: '首页', icon: 'icon-shouye', tab_index: , / ...
【原创】一篇学会vue路由配置 、 动态路由 、多层路由(实例)
先来看看效果图: 为了方便讲解,我没有使用vue脚手架,如果需要的,可以留言跟我要.不多说开工: 首先,html先组上
vue管理平台的动态路由(后台传递路由,前端拿到并生成侧边栏)
前端的路由从后台获取,包括权限: 大体步骤包括:路由拦截(钩子函数)---->后台获取路由数据 ----> 保存到本地或vuex中. 在router-->index.js中: rou ...
VueJs(10)---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.04 LTS 下 android 2.3.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/C++ source files 全局宏定义 .
\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提供的高级能力,并在部署.维护.性能调优等多个方面进行更深入的介绍和指导. ...