溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
使用 Vue.js 做項目的時候，一個頁面是由多個組件構成的，所以在跳轉(zhuǎn)頁面的時候，并不適合用傳統(tǒng)的 href，于是 vue-router 應運而生
官方文檔請點擊這里
## vue-router
第一步當然是安裝了，用npm安裝命令
npm install vue-router --save-dev
第二步在.vue組件里添加標簽，格式如下
<div id="app"> <p> <!-- 使用 router-link 組件來導航. --> <!-- 通過傳入 `to` 屬性指定在main.js文件設置的別名鏈接，如/1 --> <!-- <router-link> 默認會被渲染成一個 `<a>` 標簽 --> <router-link to="/1">Go to Foo</router-link> </p> <!-- 路由出口 --> <!-- 點擊<router-link>的時候指定的頁面將渲染在這里 --> <router-view></router-view> </div>
第三步在main.js文件里配置路由，格式如下
import VueRouter from 'vue-router'
// 1. 定義（路由）組件。
// 加載組件
import Page01 from './max'
Vue.use(VueRouter)
//全局安裝路由功能
// 2. 定義路由
// 每個路由應該映射一個組件。
const routes = [
{ path: '/1', component: Page01 }
//前面to指定的地方 path /1
]
// 3. 創(chuàng)建 router 實例，然后傳 `routes` 配置
const router = new VueRouter({
routes
})
// 4. 創(chuàng)建和掛載根實例。
// 記得要通過 router 配置參數(shù)注入路由，
// 從而讓整個應用都有路由功能
new Vue({
el: '#app',
template: '<App/>',
components: { App },
router
})
// 現(xiàn)在，就可以重啟試試了！
注意 routes 和 router 是不一樣的單詞，別眼花了
路由就是這么的簡單！
props
父組件向子組件傳值
在子組件里添加 prors ，格式如下
props: [ 'rimag', 'hyaline', 'levels', 'ohyaline' ],
然后是在父組件里向子組件里傳值，格式如下
//HTML
<nv-nav :rimag=mgse :hyaline=ortiy :levels=vels :ohyaline=orctiy></nv-nav>
// 傳值用綁定
//JS
data () {
return {
mgse: -20.62,
orctiy: 0,
vels: -1,
ortiy: 0
}
}
點擊后父組件就會將data里的數(shù)據(jù)綁定到子組件的props里
$emit
子組件改變父組件的值，通過$on將父組件的事件綁定到子組件，在子組件中通過$emit來觸發(fā)$on綁定的父組件事件
先在父組件里將值綁定給子組件并監(jiān)聽子組件變化，格式如下
//HTML
<nv-nav v-on:child-say="listen"></nv-nav>
//JS
listen: function (mgs, orc, cel, ort) {
this.mgse = mgs
this.orctiy = orc
this.vels = cel
this.ortiy = ort
}
之后在子組件data里建要改變的值，格式如下
mgs: -20.62, orc: 0, cel: -1, ort: 0
然后建個方法
dis: function () {
this.$emit('child-say', this.mgs, this.orc, this.cel, this.ort)
}
給某個元屬添加點擊事件觸發(fā)剛建的方法
<aside @click="dis"></aside>
有點亂，歡迎大家來糾正
以上就是本文的全部內(nèi)容，希望對大家的學習有所幫助，也希望大家多多支持億速云。
免責聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點不代表本網(wǎng)站立場，如果涉及侵權請聯(lián)系站長郵箱：is@yisu.com進行舉報，并提供相關證據(jù)，一經(jīng)查實，將立刻刪除涉嫌侵權內(nèi)容。
