# 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>`標簽
