基本路由的使用

本篇的vue项目，代码涉及的主要文件有：

模板文件index.html
入口文件index.js
入口组件App.js
路由组件Home：pages/Home/index.jsx
路由组件About：pages/About/index.jsx

模板文件index.html

<!DOCTYPE html>
<html lang="en"><head><meta charset="utf-8" /><link rel="icon" href="%PUBLIC_URL%/favicon.ico" /><meta name="viewport" content="width=device-width, initial-scale=1" /><link rel="stylesheet" href="%PUBLIC_URL%/css/bootstrap.css"><title>React App</title></head><body><noscript>You need to enable JavaScript to run this app.</noscript><div id="root"></div></body>
</html>

入口文件index.js

import React from 'react';
import ReactDOM from 'react-dom';
import {BrowserRouter} from "react-router-dom";
import App from './App';ReactDOM.render(<BrowserRouter><App /></BrowserRouter>,document.getElementById("root")
);

入口组件App.js

import React, { Component } from 'react'
import {NavLink,Route} from "react-router-dom";
import About from "./pages/About";
import Home from "./pages/Home";export default class App extends Component {render() {return (<div><div className="row"><div className="col-xs-offset-2 col-xs-8"><div className="page-header"><h2>Vue Router Demo</h2></div></div></div><div className="row"><div className="col-xs-2 col-xs-offset-2"><div className="list-group"><NavLink className="list-group-item" activeClassName='active' to="/about">About</NavLink><NavLink className="list-group-item" activeClassName='active' to="/home">Home</NavLink></div></div><div className="col-xs-6"><div className="panel"><div className="panel-body"><Route path="/about" component={About}></Route><Route path="/home" component={Home}></Route></div></div></div></div></div>)}
}

pages/Home/index.jsx（Home组件）

import React, { Component } from 'react'export default class Home extends Component {render() {return (<h2>我是Home的内容</h2>)}
}

pages/About/index.jsx（About组件）

import React, { Component } from 'react'export default class About extends Component {render() {return (<h2>我是About的内容</h2>)}
}

Switch组件的使用

将基于以上路由基础实例，来学习Switch组件。

问题描述

新建路由组件：Business组件，pages/Business/index.jsx。

import React, { Component } from 'react'export default class Business extends Component {render() {return (<div>我是Business的内容</div>)}
}

修改App.js。注册路由时，
一个路由，path="/home"时，component设置为Home组件；
另一个路由，path="/home"时，component设置为Business组件。


import React, { Component } from 'react'
import {NavLink,Route} from "react-router-dom";
import About from "./pages/About";
import Home from "./pages/Home";
import Business from "./pages/Business";export default class App extends Component {render() {return (<div><div className="row"><div className="col-xs-offset-2 col-xs-8"><div className="page-header"><h2>Vue Router Demo</h2></div></div></div><div className="row"><div className="col-xs-2 col-xs-offset-2"><div className="list-group"><NavLink className="list-group-item" activeClassName='active' to="/about">About</NavLink><NavLink className="list-group-item" activeClassName='active' to="/home">Home</NavLink></div></div><div className="col-xs-6"><div className="panel"><div className="panel-body"><Route path="/about" component={About}></Route><Route path="/home" component={Home}></Route><Route path="/home" component={Business}></Route></div></div></div></div></div>)}
}

启动应用，查看当导航切换到home时，会展示什么内容。
要么，只展示Home组件；
要么，只展示Business组件；
要么，既展示Home组件，又展示Business组件；（✔）
要么，哪个组件都不展示。

也就是说，当出现以下情况时，React路由会同时展示Home组件、Business组件的内容。

<Route path="/home" component={Home}></Route>
<Route path="/home" component={Business}></Route>

使用Switch组件

针对以上问题，我们现在使用Switch组件将所有的Route组件包裹起来，修改后的App.js如下：

import React, { Component } from 'react'
import {NavLink,Switch,Route} from "react-router-dom";
import About from "./pages/About";
import Home from "./pages/Home";
import Business from "./pages/Business";export default class App extends Component {render() {return (<div><div className="row"><div className="col-xs-offset-2 col-xs-8"><div className="page-header"><h2>Vue Router Demo</h2></div></div></div><div className="row"><div className="col-xs-2 col-xs-offset-2"><div className="list-group"><NavLink className="list-group-item" activeClassName='active' to="/about">About</NavLink><NavLink className="list-group-item" activeClassName='active' to="/home">Home</NavLink></div></div><div className="col-xs-6"><div className="panel"><div className="panel-body"><Switch><Route path="/about" component={About}></Route><Route path="/home" component={Home}></Route><Route path="/home" component={Business}></Route></Switch></div></div></div></div></div>)}
}

可以看到，使用Switch组件包裹所有Route组件后，当出现同一个path对应多个不同组件的情况时，只会展示第一个与path匹配的组件。即，Switch组件帮助实现了路由的单一匹配。

Switch组件的使用相关推荐

Ant Design of Vue —— setFieldsValue方法动态操作Switch组件
在开发中经常使用Form组件管理表单,这次想通过form提供的setFieldsValue()方法动态改变Switch组件状态,却没有生效. 加入valuePropName属性之后,就可以使用动态操作 ...
react native 组件之switch组件的用法
写项目需要用到RN的switch组件,在官方文档上大概看了下,主要讲的就是switch组件的一些样式,还有调用的方法:onValueChiange,但关于怎么切换开关,怎么调用等,都没有提到..无奈 ...
java switch小程序,小程序自定义switch组件
如上图,小程序api中的switch组件只能自定义颜色,不能自定义宽高,所以就开始了自己写switch组件. 自定义组件样式 switch组件样式大致如图,样式思路:未选中时为一个长方形有圆角按钮,和 ...
支付宝小程序组件库开发之自定义switch组件
支付宝小程序在官方文档上已经给出了switch组件,点击这里直达Switch,官方给出的示例是这样的: 结果实现出来是这样的: 卧槽,坑了,有点不爽,那就自己写一个吧,也不费多大的事,下面看效果: 这 ...
uni-app checkbox和switch组件checked属性无效的解决方案
uni-app 是一个使用 Vue.js 开发所有前端应用的框架,开发者编写一套代码,可发布到iOS.Android.H5.以及各种小程序(微信/支付宝/百度/头条/QQ/钉钉)等多个平台. 相信许多 ...
微信小程序修改switch组件的大小
在使用switch组件时,想修改switch的大小,设置的height,width都没有效果, 查看官方文档,发现没有设置大小的属性官方文档如下: 原来大小样式: 使用下面样式可进行修改 .wx-s ...
微信小程序--修改switch组件的大小size
修改switch组件的大小小程序中switch组件的大小往往和实际项目中的大小有些出入,但是发现文档中并没有修改大小的方法,但是可以根据自己的实际情况进行颜色设置. 直接上代码: <switc ...
taro框架 Switch组件不兼容android手机
不兼容安卓机型,在安卓机型下关闭状态变成了一个圆点,,,其实我感觉应该是背景颜色太浅,被覆盖了,但是看了官方文档,也没有对于关闭时去修改其背景颜色的属性,只有一个color属性还是作用于开启时的背景颜 ...
微信小程序----switch组件（开关选择器）
效果体验二维码如果文章对你有帮助的话,请打开微信扫一下二维码,点击一下广告,支持一下作者!谢谢! DEMO下载效果图 WXML <view class="tui-list-box& ...

Switch组件的使用

文章目录

基本路由的使用

模板文件index.html

入口文件index.js

入口组件App.js

pages/Home/index.jsx（Home组件）

pages/About/index.jsx（About组件）

Switch组件的使用

问题描述

使用Switch组件

Switch组件的使用相关推荐

最新文章

热门文章