vue-router跳轉頁面

小結放在前：先祝你們新年快樂！雞年大吉大利！在新的一年裏你們都有跳躍般的成長！做爲新年的第一篇文章，就拿他來給你們拜個年！！！文章前部份講解了vue-router路由的配置，後半部分爲去年的文章vue.js快速入門添加了兩個知識點 props 和 $emit 組件間的通訊，但願你們看完有所收穫！！！

使用 Vue.js 作項目的時候，一個頁面是由多個組件構成的，因此在跳轉頁面的時候，並不適合用傳統的 href，因而 vue-router 應運而生

官方文檔請點擊這裏

先看效果：

運行查看效果

注意：我這裏用的是 vue-cli 作的演示

## 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. 建立 router 實例，而後傳 `routes` 配置
const router = new VueRouter({
  routes
})

// 4. 建立和掛載根實例。
// 記得要經過 router 配置參數注入路由，
// 從而讓整個應用都有路由功能
new Vue({
  el: '#app',
  template: '<App/>',
  components: { App },
  router
})

// 如今，就能夠重啓試試了！

注意 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裏的數據綁定到子組件的props裏

$emit

子組件改變父組件的值，經過$on將父組件的事件綁定到子組件，在子組件中經過$emit來觸發$on綁定的父組件事件

先在父組件裏將值綁定給子組件並監聽子組件變化，格式以下

//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)
}

給某個元屬添加點擊事件觸發剛建的方法

<aside @click="dis"></aside>

有點亂，歡迎你們來糾正

有公衆號了，不按期推送熱門前端技術文章！！！