[TOC] 路由：根据**不同的url**呈现**不同的页面** #### **vue中如何实现一个路由** （1）事件 ``` <button @click="handleClick">detail</button> methods:{ handleClick(){ this.$router.push('/about/'+10); } } ``` ``` export default { name:"About", mounted(){ console.log(this.$route.params) } } ``` 通过`this.$route.params`获取传递过来的参数值 （2） `<router-link>`标签跳转 ``<router-link to="path"></router-link>`` ``` <router-link :to="'/detail/'+item.id"></router-link> ``` router.js注册 ``` { path: '/about/:id', name: 'about', component: ()=>import('@/pages/About.vue') } ``` #### **微信小程序实现路由** wx.navigateTo、wx.redirectTo、wx.switchTab(tabbar)、`<navigator>` #### **React实现路由** router.js中注册 ``` import { BrowserRouter as Router, Route} from "react-router-dom"; const AppRouter = () => ( <Router> <div> <Route path="/" exact component={App} /> <Route path="/detail/:id" component={Detail} /> </div> </Router> ); export default AppRouter; ``` movieItem.js中Link to跳转 ``` import{Link} from 'react-router-dom'; <Link to={'/detail/' + this.props.movie.id}></Link> ```