[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> ```