好客租房96-默认路由

默认路由 :进入页面要展示的路由 /就是默认路由

<Route path="/">

//导入react
import React from 'react'
import ReactDOM from 'react-dom'
import {BrowserRouter as Router,Route,Link,} from "react-router-dom"
//导入组件
// 约定1:类组件必须以大写字母开头
// 约定2:类组件应该继承react.component父类 从中可以使用父类的方法和属性
// 约定3:组件必须提供render方法
// 约定4:render方法必须有返回值
const Frist=()=>(
    <p>页面1的内容</p>
)
const Home=()=>(
    <p>页面2的内容</p>
)
class App extends React.Component {
    handleLogin=()=>{
        
        console.log(this.props.history)
        this.props.history.push("/home")
    }
    //render方法的调用并不意味着浏览器的重新调用
	render() {
		
		return (
            <Router>
			<div>
				<h1>React路由基础</h1> 
                <button onClick={this.handleLogin.bind(this)}>跳转</button>
                {/* 指定路由入口 */}
                <Link to="/">页面1</Link>
                <Link to="/home">页面2</Link>
                {/* 指定路由出口 */}
                <Route path="/" component={Frist}></Route>
                <Route path="/home" component={Home}></Route>
               
			</div>
            </Router>
		)
	}
}



ReactDOM.render(<App></App>, document.getElementById('root'))

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
好的,下面是一个简单的好客租房项目的vue实现: 首先,我们需要安装Vue CLI脚手架工具来创建一个Vue项目。 ``` npm install -g @vue/cli vue create haokezufang ``` 然后,我们可以使用Element-UI组件库来构建页面,并使用axios库与后端API进行通信。 ``` npm install element-ui axios ``` 接下来,我们可以在src/components目录下创建我们的组件: 1. Home.vue:首页组件 2. List.vue:房源列表组件 3. Detail.vue:房源详情组件 然后,在src/router目录下,我们可以创建路由文件index.js来配置我们的路由: ``` import Vue from 'vue' import Router from 'vue-router' import Home from '@/components/Home' import List from '@/components/List' import Detail from '@/components/Detail' Vue.use(Router) export default new Router({ routes: [ { path: '/', name: 'Home', component: Home }, { path: '/list', name: 'List', component: List }, { path: '/detail/:id', name: 'Detail', component: Detail } ] }) ``` 最后,在src/App.vue文件中,我们可以使用Element-UI的Header、Footer和Container组件来构建我们的页面布局,并在router-view中展示我们的组件。 ``` <template> <div id="app"> <el-header> // Header内容 </el-header> <el-container> <router-view></router-view> </el-container> <el-footer> // Footer内容 </el-footer> </div> </template> <script> import Header from './components/Header.vue' import Footer from './components/Footer.vue' export default { name: 'app', components: { 'app-header': Header, 'app-footer': Footer } } </script> ``` 至此,我们的好客租房项目就完成了。当然,这只是一个简单的实现,你可以继续完善它,添加更多功能和特性。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

前端大歌谣

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值