### 1.新建一個要跳轉的頁面
這里以跳轉Detail.vue,為例子
### 2.在`router.js`中對要跳轉的頁面注冊
> Tip:如果路由頁面要傳值,也要在path中注冊
~~~
import Detail from "@/pages/Detail.vue"
routes: [
{
/* 配置id */
path: '/detail/:id',
name: 'detail',
component:Detail
},
],
~~~
### 3.通過事件跳轉對應的頁面
~~~
//假設在item.vue頁面跳轉
<div @click="handleClick"></div>
methods:{
handleClick(){
this.$router.push("/detail/"+id)
}
}
~~~
### 4.在跳轉頁面接收傳遞過來的參數
~~~
mounted() {
/*接收參數 */
var id=this.$route.params.id;
movieModel.getDetail(id).then(res=>{
var imgUrl=res.images.small;
var title=res.title;
this.imgUrl=imgUrl;
this.title=title;
})
},
~~~
- vue
- 第一章 起步
- 第1節 開發環境配置
- 第2節 hello world
- 第3節 開發todolist
- 第四節 vue-temp
- 第二章 基本
- 第1節 實例，掛載點，模板
- 第2節 vue的生命周期
- 2-1 數據改變時執行的生命周期函數
- 第3節 條件渲染
- 第4節 v-text和v-html的區別
- 第5節 計算屬性，方法，watch偵聽器
- 第6節 計算屬性的get，set方法
- 第7節 樣式綁定
- 第8節 列表渲染
- 第9節 Vue.set
- 第10節 vue點擊事件獲取元素的內容
- 第三章 項目開發
- 第一節 top250的開發
- 第二節 滑動顯示
- 第四章 vue組件
- 第1節 父組件向子組件傳參
- 第2節 子組件向父組件傳參
- 第五章 Vue項目
- 第六章 vue中的路由如何實現
- 第七章 全局組件和局部組件
- 第八章 vue組件和vue實例的關系
- 第九章 vue組件的模板方式
- 0.0 視頻
- 第十章 gshop項目
- 1. stylus
- 第十一章 將vue項目部署到服務器上