[TOC]
# 1.实现一个简单的路由跳转
## 1.1pages文件夹下配置一个detail.vue的页面
```
<template>
<div>
detail
</div>
<template>
```
## 1.2在router.js配置一下
```
routes: [
{
path: '/',
name: 'home',
component: Home
},
{
path: '/about',
name: 'about',
component: ()=>import('@/pages/About.vue')
}
]
```
## 1.3跳转
```
<router-link to="/about">about</router-link>
```
## 1.4事件跳转
```
<button @click="handleClick">detail</button>
export default {
name:"Home",
methods:{
handleClick(){
this.$router.push('/about');
}
}
}
```
# 2.跳转传参
## 2.1router.js配置,传那些参数
```
//只传递id
{
path: '/about/:id',
name: 'about',
component: ()=>import('@/pages/About.vue')
}
```
## 2.2例如从Home,跳转到Detail
```
//Home.vue
<button @click="handleClick">detail</button>
methods:{
handleClick(){
this.$router.push('/about/'+10);
}
}
```
## 2.3Detail.vue
```
//Detail.vue
export default {
name:"About",
mounted(){
console.log(this.$route.params)
}
}
```
