## 跳转 **router.js** 1. **无需传参** ``` { path: '/about', name: 'about', component: ()=>import('@/pages/About.vue') } ``` 2. **需要传参** ``` { path: '/about/:id', name: 'about', component: ()=>import('@/pages/About.vue') } ``` **** ### `<router-link>`标签跳转 本质是a标签，使用tag能改变标签类别 **具有tag属性的router-link会被渲染成相应的标签** 1. **没有传参** ``` <router-link tag="div" to="/about">about</router-link> ``` 2. 如果**有需要传递的id值** ``` <router-link :to="'/detail/'+item.id"></router-link> ``` **** **** ### 事件跳转 1. **无需传参** ``` <button @click="handleClick">detail</button> export default { name:"Home", methods:{ handleClick(){ this.$router.push('/about'); } } } ``` 2. **需要传参** Home.vue ``` //Home.vue <button @click="handleClick">detail</button> methods:{ handleClick(){ this.$router.push('/about/'+10); } } ``` Detail.vue ``` //Detail.vue export default { name:"About", mounted(){ console.log(this.$route.params) } } ``` >[danger]通过`this.$route.params`获取传递过来的参数值