# vue 中的路由如何实现
### 1.新建一个要跳转的页面
这里以跳转Detail.vue为例子
### 2.在router.js中对要跳转的页面注册
tip:如果路由页面要传值，也要在path中注册
import Detail from '@/pages/Detail.vue'
routes:{
{
path: '/detail/:id', //注意：使用':'表示传值
name: 'detail',
component:Detail
},
}
### 3.通过事件跳转对应的页面
/*以pages/Home/components/items为例
通过点击事件触发跳转页面
*/
<template>
<div>
<div class="container" @click="handleClick"></div>
</div>
</template>
<script>
export default{
methods:{
handleClick(){
var id = this.movie.id;
this.$router.push('/detail/'+id)
}
}
</script>
### 4.在跳转页面接受传递过来的参数
mounted(){
/* 接受参数 */
var id = this.$route.params.id;
movieModel.getDetail(id).then(res=>{
this.title = res.title;
this.imgUrl = res.images.small;
})
}
- tip：在跳转页面时，需要重新发送请求,在`app.vue`中删掉`<keep-alive>`标签
